concatenate before transpiling when allChunks === true.

[istrau2]

I just finished porting over from a regular webpack.config. I tried using config-sass like so:

require('@easy-webpack/config-sass')({ filename: 'styles-sass.css', allChunks: true, sourceMap: false })

and ran into issue where variables are not available. This is a result of having a dedicated variables file that I import in my main scss file like so:

@import('variables');
@import('some-other-file-that-uses-variables);

In the case above, if the scss files are all concatenated together prior to scss -> css transpilation, the variables will be available. Eventually I solved the problem by just using:

{ test: /\.scss$/, loader: 'raw' }

and then just importing the main.scss file like so:

import '!style!css!sass!./main.scss';

I believe this solves it because the main file imports all the others which are imported using the raw-loader. Then, the main file is transpiled and all variables are available at all references.

[ferdiemmen]

@istrau2 In which file did you put the line: import '!style!css!sass!./main.scss';
I'm having the exact same problem. Although the preprocessor does compile a correct css file with the settings. It still gives the warning in the terminal and console.

[niieani]

I think there's a better way to do this. Did you look at the sass-loader documentation how they're tackling this?

[istrau3]

@ferdiemmen I added the import in main.js (because that is the webpack entry). If you figure out how to solve this more elegantly (i.e. using the sass-loader) please post here.

@niieani I assume that you could import your variables file into every file that uses it but the way I have mine structured, I import all the files up into the main.scss and in main.scss I import the variables.scss file first so that it is available to all the files. I will take a look and see if there is a better way to deal with this as soon as I can.

[ferdiemmen]

@niieani I looked at the documentation but it seems this is by design. As seen at:
https://www.bensmithett.com/smarter-css-builds-with-webpack/

"In the Webpack approach, each Sass file is compiled in isolation. This isn't a new idea, but I think it's a much better way of doing Sass. It just means you need to @import dependencies like variables & mixins wherever you use them"

and

http://blog.teamtreehouse.com/tale-front-end-sanity-beware-sass-import

Although I still think it's weird because setting variables once's is a feature of node-sass. And I've seen it been used many times in other style setups.