boldnik boldnik - 2 months ago 18
Sass (Sass) Question

SCSS @import's processing order with webpack

The webpack is configured with

sass-loader
module to process
.scss
files. Here is the chunk from config file:

{
test: /\.scss$/,
loaders: ["react-hot", "style", "css?sourceMap&-minimize", "autoprefixer-loader?safe=true", "sass?sourceMap"]
},


As you may guessed, I use ReactJS and hot-reloader. The way how I would like to structure the app is much more modular than usually offered in different tutorials (each component should has it's own
style.scss
file in the same folder). So the current structure of folders is such as:


  • _base.scss

  • _variables.scss

  • _components.scss



And the last one has
@import
s from all
style.scss
s buried somewhere in other folders far away. Obviously, I put all imports of variables and mixins and basic things above all other imports which use some variables. Unobviously for me is why during a build process I get error message that it can't find a variable.
How in this case the Webpacks'
sass-loader
defines the order of
@import
s? And what should I do to make a more clear structure of stylesheet imports? I would like to achieve two goals in general: 1) keep the components with own styles separately and 2) make the maintainability less painful.

Sidenote:
I've also considering some helper functions which allow to create a new list of
@import
s on each bundling:

find ./src/components -iname '*.scss' | sed 's/.\/src/../g' | awk '{print "@import \""$0"\";"}' >> $NAME


Something like this. But it's not a best solution according to my gut feeling :) .

Answer

Ok, I admit that the question itself is quite complex. So I ended up with multiple changes across the project and here is at least one chunk of config which makes sense for me:

autoprefixer-loader?safe=true

should be replaced with

postcss

in the webpack.config.js file and accordingly installed via npm. In current case I fixed an issue with @imports, but the question regarding the best way to customize scss structure so that any layout encapsulates styling for layout and each component has it's own styling for itself. Will play around but would be great to hear any suggestions.