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

【问题标题】：How to add styles .css files from .angular-cli.json into karma unit test如何将 .angular-cli.json 中的样式 .css 文件添加到业力单元测试中
【发布时间】：2018-06-26 18:18:36
【问题描述】：

我正在使用 ag-grid v.17，为了正确显示网格，我必须在 .angular-cli.json 中导入 ag-grid .css，但是当我在业力单元测试，我怎样才能添加那些 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"
  ],

【问题讨论】：

标签： angular angular-cli ag-grid

【解决方案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']
},

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

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

参考：How to configure Karma to include global scss files for an angular-cli project?

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

【讨论】：