Angular13升级至14后Webpack配置引发CSS加载语法错误求助

问题根源 #

你遇到的错误是因为postcss-loader未正确解析CSS中的@import语法，尤其是处理node_modules目录下的第三方CSS文件时，默认配置缺少必要插件或存在loader规则冲突。

具体解决步骤 #

1. 补充PostCSS的postcss-import插件 #

先安装依赖插件：

npm install postcss-import --save-dev

修改postcss.config.js，将postcss-import放在插件数组最前面（PostCSS插件按顺序执行，该插件需要优先处理@import语句）：

module.exports = {
  plugins: [
    require('postcss-import'),
    // 其他插件如autoprefixer等放在后面
    require('autoprefixer')
  ]
};

2. 调整自定义Webpack的CSS loader规则 #

修改custom-webpack.config.js，确保loader执行顺序正确（从右到左：postcss-loader → css-loader → style-loader），同时针对@xbs/webix-pro的CSS文件做特殊规则配置：

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        exclude: /node_modules\/(?!@xbs\/webix-pro)/, // 仅排除webix-pro之外的node_modules文件
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1, // 告诉css-loader处理@import时先执行1个前置loader（即postcss-loader）
            }
          },
          'postcss-loader'
        ]
      },
      {
        test: /\.css$/,
        include: /node_modules\/@xbs\/webix-pro/,
        use: [
          'style-loader',
          'css-loader',
          'postcss-loader'
        ]
      }
    ]
  }
};

3. 验证Angular.json的自定义Webpack配置 #

确保项目使用@angular-builders/custom-webpack的builder，并正确指定配置文件路径：

{
  "projects": {
    "你的项目名": {
      "architect": {
        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "customWebpackConfig": {
              "path": "./custom-webpack.config.js"
            },
            // 其他原有配置项...
          }
        },
        "serve": {
          "builder": "@angular-builders/custom-webpack:dev-server",
          "options": {
            "browserTarget": "你的项目名:build"
          }
        }
      }
    }
  }
}

4. 清理缓存并重新构建 #

执行以下命令清理缓存、重装依赖后启动服务：

rm -rf node_modules .angular/cache package-lock.json
npm install
ng serve

额外排查点 #

• 若问题仍存在，检查css-loader版本是否与Angular14兼容，推荐使用css-loader@6.x版本（Angular14默认依赖的版本范围）。
• 确认webix.min.css中的@import语法是否标准，排查是否存在拼写错误或路径问题。

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