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 @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 :) .
