Merge SCSS files before injecting into HTML about apollo-universal-starter-kit HOT 3 CLOSED

Hi Joe,

Yes, I think the order need to be changed vice versa, e.g. bootstrap.scss need to be loaded first, and styles.scss second.

The reason for separation is to speed up hot code reload for styles. Bootstrap styles are pretty big and we wanted to separate them out, so that they don't slow down reloading times of custom styles during development.

from apollo-universal-starter-kit.

Just following up here, it looks like splitting up the files like they are now increases build speed but one of the largest benefits of Bootstrap is being able to build with their variables available so developers can stick to a convention and not have to name things on their own. Running the project requesting a very popular variable returns in an error:

// styles.scss
ERROR in ./~/css-loader!./~/sass-loader!./src/ui/styles.scss
Module build failed:
  background-color: $brand-primary;
                   ^
      Undefined variable: "$brand-primary".
      in /Users/jb/Sites/forks/apollo-fullstack-starter-kit/src/ui/styles.scss (line 10, column 21)
Error:
  background-color: $brand-primary;
                   ^
      Undefined variable: "$brand-primary".
      in /Users/jb/Sites/forks/apollo-fullstack-starter-kit/src/ui/styles.scss (line 10, column 21)
    at options.error (/Users/jb/Sites/forks/apollo-fullstack-starter-kit/node_modules/node-sass/lib/index.js:291:26)
 @ ./src/ui/styles.scss 2:18-127 19:6-27:8 20:18-127
webpack-for-backend Time: 82ms

Unfortunately the only way to solve this is to import the bootstrap file within styles.scss to get access to the variables that Bootstrap already defined. I think the average developer looking at this repo will probably figure that out, but maybe a note should be made about this in the README. I do understand some developers want Bootstrap basics and don't care about variable access.

For what it's worth, the style update speed is pretty fast either way. Without summoning bootstrap from style.scss it's about ~2 seconds on a 2016 Macbook Pro. Calling bootstrap from within style.scss and not having 2 files in html.jsx is about ~3 seconds.

from apollo-universal-starter-kit.

@josephdburdick Let's maybe merge styles.scss with bootstrap.scss then. Incremental build speedup time seems not worth the trouble and confusion it creates...

from apollo-universal-starter-kit.