I'm trying to make a webpack config for my project with some scss. Some of it comes from the root project and some scss I want to load from dependencies e.g. from node_modules
. I'm running into a strange error where if I don't include the node_modules
in the module, it get's built including some scss that I have in the root project. But if I add include: path.resolve(__dirname, 'node_modules')
or any other folder (eve one that doesn't exist) it fails but on file that is in root project and not in node_modules
, the same files that it was extracting before with no errors.
Here is the webpack config:
const extractCSS = new ExtractTextPlugin({ filename: 'style.css', disable: false, allChunks: true });
module: {
rules: [
{
test: /\.scss$/,
include: path.resolve(__dirname, 'node_modules'),
use:extractCSS.extract({
fallbackLoader: 'style-loader',
loader: ['css-loader', 'sass-loader'],
})
},
]
}
So if I comment out the line with include
it works but doesn't include node_modules
and if I leave the line uncommented I get the error:
Unexpected character '@' (1:0) You may need an appropriate loader to handle this file type.
in all of the scss files that are in the root project.
What am I doing wrong?