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

Question

我使用的是ag-grid v.17，为了使其正确显示网格，我必须在.angular-cli.json中导入ag-grid .css，但是在业力单元测试中创建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']
},

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

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

参考： 如何配置Karma以包括angular-cli项目的全局scss文件？

另一个参考： 单元测试中的Angular 4 Karma加载CSS