Webpack打包CSS文件时出现‘Unknown word’错误的解决方法

错误根源 #

你遇到的问题是因为postcss-loader尝试解析monaco-editor的CSS文件中的Webpack loader语法（带!前缀的import语句），但postcss-loader只能处理纯CSS语法，无法识别这类打包工具专属的语法，因此抛出语法错误。同时你的SCSS规则存在loader缺失和顺序错误的问题。

修复步骤 #

1. 调整CSS规则，排除第三方库目录
   第三方依赖的CSS通常已经完成打包处理，不需要再通过postcss-loader二次处理，所以在CSS规则中排除node_modules目录：

{
  module: {
    rules: [
      {
        test: /\.css$/i,
        exclude: /node_modules/,
        use: [
          "style-loader",
          "css-loader",
          "postcss-loader"
        ],
      },
      // 其他规则...
    ]
  }
}

2. 单独处理monaco-editor的CSS文件
   如果需要保留对monaco-editorCSS的处理，添加一条仅针对它的规则，跳过postcss-loader：

{
  test: /\.css$/i,
  include: /node_modules\/monaco-editor/,
  use: [
    "style-loader",
    "css-loader"
  ],
}

3. 修复SCSS规则的loader顺序与缺失项
   Webpack loader按从右到左的顺序执行，SCSS文件需要先经过sass-loader转译为CSS，再通过postcss-loader处理，接着用css-loader解析资源引用，最后由style-loader注入到页面。你之前的规则缺少style-loader和css-loader，调整后如下：

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

完整配置示例 #

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

内容的提问来源于stack exchange，提问作者HelloWorld