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:
And the last one has @imports from all style.scsss 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 @imports? 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 @imports 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 :) .
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.