Karma测试无法运行：缺少.css文件的Webpack加载器求助

数据老陈

2026-6-27

解决Angular项目ng test时ag-grid CSS加载失败导致无测试显示的问题

核心原因

Angular CLI默认未暴露Webpack配置，而Karma测试环境中缺少处理ag-grid-community CSS文件的加载器，导致代码解析失败，进而让测试无法正常执行（浏览器显示无测试）。

解决方案（不破坏原有Webpack配置）

1. 安装必要依赖

通过@angular-builders/custom-webpack扩展Webpack配置，同时安装CSS处理加载器：

npm install @angular-builders/custom-webpack css-loader style-loader --save-dev

2. 创建自定义测试用Webpack配置文件

在项目根目录新建webpack.test.config.js，添加针对ag-grid-community CSS的处理规则：

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
        // 仅处理ag-grid-community的CSS，避免干扰其他依赖
        exclude: /node_modules\/(?!ag-grid-community)/
      }
    ]
  }
};

3. 修改angular.json配置

找到项目architect下的test配置，替换builder并引入自定义Webpack配置：

"test": {
  "builder": "@angular-builders/custom-webpack:karma",
  "options": {
    "customWebpackConfig": {
      "path": "./webpack.test.config.js"
    },
    // 保留原有其他配置（main、polyfills、tsConfig等）
    "main": "src/test.ts",
    "polyfills": "src/polyfills.ts",
    "tsConfig": "tsconfig.spec.json",
    "karmaConfig": "karma.conf.js",
    "assets": [
      "src/favicon.ico",
      "src/assets"
    ],
    "styles": [
      "src/styles.css"
    ],
    "scripts": []
  }
}