boldnik boldnik - 1 year ago 137
Sass (Sass) Question

SCSS @import's processing order with webpack

The webpack is configured with

module to process
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
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
s from all
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'
defines the order of
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.

I've also considering some helper functions which allow to create a new list of
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 Source

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:


should be replaced with


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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download