webpack fails "module build failed: unknown word" with webpack.config.js file webpack fails "module build failed: unknown word" with webpack.config.js file wordpress wordpress

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


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.


Have check these issues getting similar issues in my web pack projectYou 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..