如何在 webpack 中捆綁 css 文件時修復“未知單詞”錯誤

Question

我正在 Angular 中構建一個 Electron 應用程序，並且我正在將幾個依賴項升級到最新版本。

• ✅ Electron 停留在v19
• ✅ Tailwindcss v3.1.8
• ⬆️ Angular v11到v14
• ⬆️ Webpack v4.46.0到v5.74.0

ℹ️之前編譯成功的整個項目。

我正在使用monaco-editor ，由於遇到了上面的問題，我在 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";

在升級版本之前， webpack.config.json僅包含/\.scss$/的規則！ 但是突然使用 webpack v5 失敗，它無法理解一些css文件（著名的錯誤： You may need an appropriate loader to handle this file type ）。

所以我假設缺少 CSS 的規則。 我添加了規則，我的 webpack 文件現在看起來像這樣：

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

請注意"style-loader" 、 "css-loader" 、 'postcss-loader'的順序，這些順序在此處和此處等帖子中被報告為正確的順序。 我仍然收到上面的錯誤。

誰能指出我的 webpack 是否配置錯誤或者我錯過了一條規則？

Answer 1

為什么要注意結合測試？ 不需要有兩個不同的，因為 sass 加載程序會將其轉換為 css。

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