1

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?

Dmitry Fadeev
  • 2,073
  • 2
  • 12
  • 12

0 Answers0