webpack fails “module build failed: unknown word” with webpack.config.js file

Question

webpack does not work for me when trying to add css using the css-loader.

os: Windows 10 pro, webpack: 4.8.0 node: 8.9.4 npm: 6.0.0 css-loader: 0.28.11 style-loader

Answer 1

In webpack, when you list multiple loaders within a rule, they are evaluated from right to left (in your case, bottom to top), so your scss rule should be:

  {
    test: /\.(s*)css$/,
    use: [
      'style-loader',
      'css-loader',
      'sass-loader'
    ]
  }

The reason is that first, you want your sass to compile to css, and then the css will be inlined in your html file via the style-loader.

Also, if you are not using sass, you can remove the sass-loader.

Answer 2

Have check these issues getting similar issues in my web pack project You have to check the web pack rule :

{
    test: /\.(s*)css$/,
    use: [
      'style-loader',
      'css-loader',
      'sass-loader'
    ]
  }

Above, updated the rule it will handle our sass or CSS files. The test is test: /.(s*)css$/ : which means any file having name matching with regular expression /.(s*)css$/i.e. .scss or .css

It should be compiled with the chain of loaders specified in the use array i.e. ['style-loader', 'css-loader', 'sass-loader'].

This rule chain the output of sass-loader to css-loader. css-loader will take this css output of sass-loader and will also process any other .css files we have in our application and pass on the .css to style-loader, which will then do the job of putting the css codes inside tags in our index.html,It work bottom to top..