javascript - How to fix 'Unknown word' error when bundling css file in webpack - Stack Overflow

admin管理员组

文章数量:1316841

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 piled 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?

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 piled 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?

• javascript
• css
• webpack
• tailwind-css
• monaco-editor

Share Improve this question Follow asked Sep 5, 2022 at 20:29 HelloWorldHelloWorld 1,86344 gold badges3838 silver badges8888 bronze badges 6

• 2 Have you found a solution? I had an application working 3 days ago and now, without any change, it's not working anymore... – valepu Commented Sep 12, 2022 at 15:29
• 2 Not yet, unfortunately. If you also are stuck in this, maybe a dependency bump somewhere? – HelloWorld Commented Sep 12, 2022 at 21:29
• 1 Yeah that was my thought, probably a minor webpack or css plugins version (app was created pretty recently) – valepu Commented Sep 13, 2022 at 10:17
• 2 I have the same, my css is located inside node_modules. Does that mean by ignoring it it will simply not be part of the bundle and stay a separate resource? – HelloWorld Commented Sep 14, 2022 at 12:50
• 2 I haven't gotten as far as deplyoing the application but i've just tried to build the application and it put the css from my node_modules into the bundle. I invite you to test this solution and see if it works for you too – valepu Commented Sep 14, 2022 at 13:32

 |  Show 1 more ment

3 Answers 3

Sorted by: Reset to default 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./webpack-contrib/css-loader/issues/295#issuement-335443361

Tested with Bootstrap, Bootstrap icons and ReactJS.

 { 
   test: /\.scss$/,
      //install these npm packages and use it in this exact order to pile scss files
        use: [
               'style-loader',
               'css-loader', 
               'sass-loader'
             ],
 }

Why not bine the tests? No need to have two different since the Sass loader will convert it to CSS.

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

本文标签： javascriptHow to fix 39Unknown word39 error when bundling css file in webpackStack Overflow