如何将样式 .css 文件从 .angular-cli.json 添加到业力单元测试中

Question

我正在使用 ag-grid v.17，为了让它正确显示网格，我必须在 .angular-[=18 中导入 ag-grid .css =]，但是当我在 karma 单元测试中创建 testBed 时，如何添加那些 css 文件？

我在 .angular-cli.json

中添加的样式

  "styles": [
    "styles/app.scss",
    "../node_modules/ag-grid/dist/styles/ag-grid.css",
    "../node_modules/ag-grid/dist/styles/ag-theme-balham.css",
    "../node_modules/ag-grid/dist/styles/compiled-icons.css"
  ],

Answer 1

您可以将其添加到您的 karma.config.js 文件中

files: [
  "../node_modules/ag-grid/dist/styles/ag-grid.css",
  "../node_modules/ag-grid/dist/styles/ag-theme-balham.css",
  "../node_modules/ag-grid/dist/styles/compiled-icons.css",
  { pattern: './src/app.scss', watched: true,  included: true, served: true }
],
preprocessors: {
  './src/styles.scss': ['scss']
},

您可能还需要为 karma 添加预处理器

npm install karma-scss-preprocessor node-sass --save-dev

参考：

另一个参考：Angular 4 Karma Loading CSS in Unit Testing

如何将样式 .css 文件从 .angular-cli.json 添加到业力单元测试中

How to add styles .css files from .angular-cli.json into karma unit test

ag-grid

angular-cli

angular