How to fix 'Unknown word' error when bundling css file in webpack

Question

I am building an Electron app in Angular and I am upgrading a couple of dependencies to the latest versions.

• ✅ Electron stays on v19
• ✅ Tailwindcss v3.1.8
• ⬆️ Angular v11 to v14
• ⬆️ Webpack v4.46.0 to v5.74.0

ℹ️ The entire project compiled before successfully.

I am using the monaco-editor and since bumping the deps above I am running into an issue during the bundling stage of webpack.

HookWebpackError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
SyntaxError

(2:7) /.../projects/foo/node_modules/monaco-editor/min/vs/editor/editor.main.css Unknown word

  1 | 
> 2 |       import API from "!../../../../style-loader/dist/runtime/injectStylesIntoStyleTag.js";
    |       ^
  3 |       import domAPI from "!../../../../style-loader/dist/runtime/styleDomAPI.js";
  4 |       import insertFn from "!../../../../style-loader/dist/runtime/insertBySelector.js";

Before bumping the versions the webpack.config.json only contained a rule for /\.scss$/! But suddenly with webpack v5 it failed that it is unable to understand some css files (famous error: You may need an appropriate loader to handle this file type).

So I assumed a rule for CSS was missing. I added the rule and my webpack file now looks like this:

{
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          "style-loader",
          "css-loader",
          "postcss-loader"
        ],
      },
      {
        test: /\.scss$/,
        use: [
          'postcss-loader',
          {
            loader: 'sass-loader',
            options: {
              implementation: sassImplementation,
            },
          },
        ],
      },
    ],
  },
}

Please note the order "style-loader", "css-loader", 'postcss-loader' that has been reported as the correct one in posts like here and here. I still receive the error above.

Can anyone point out if my webpack is misconfigured or if I missed a rule?

Answer 1

For me works using postcss-loader and importLoaders:

rules: [
  {
    test: /\.css$/,
    use: [
      'style-loader',
      { loader: 'css-loader', options: { importLoaders: 1 } },
      'postcss-loader'
    ]
  }
]

Reference: https://github.com/webpack-contrib/css-loader/issues/295#issuecomment-335443361

Tested with Bootstrap, Bootstrap icons and ReactJS.