如何配置Karma以包含angular-cli项目的全局scss文件？

Question

我无法配置angular-cli + scss + karma来一起测试我的组件.运行ng testkamra单元测试仅包括组件自己的scss样式.

为了在测试中应用我的主要styles.scss,我尝试在karma.conf.js中配置它们:

files: [ 
  { pattern: './src/test.ts', watched: false },
  { pattern: './src/styles.scss' },   // main scss
  { pattern: './src/test.css' },      // just some test css to see if it is working
]
preprocessors: {
  './src/test.ts': ['@angular/cli'],
  './src/styles.scss': [ '@angular/cli' ]
}

在业力测试期间仍未包括主要scss.但组件拥有scss和全局css.

我怎样才能使它工作？

Answer 1

无 NPM 包：Angular 方式

angular.json在stylePreprocessorOptions-property的-file 中添加文件。

projects.your-project-name.architect.build.options并且projects.your-project-name.architect.test.options应该是相同的：

{
  "projects": {
    "your-project-name": {
      "architect": {

        "build": {
          "options": {
            "stylePreprocessorOptions": {
              "includePaths": [
                "./src/styles"
              ]
            },
            ...
          },
          ...
        },

        "test": {
          "options": {
            "stylePreprocessorOptions": {
              "includePaths": [
                "./src/styles"
              ]
            },
            ...
          },
          ...
        },

        ...

      },
      ...
    },
    ...
  },
  ...
}

@istibekesi，Angular 框架有一个 angular.json 配置文件，您可以在其中添加样式路径，因此它将包含在 Karma/test 构建中。因此不需要安装karma-scss-preprocessor.

将我的 variables.scss 导入组件的样式表时，我遇到了同样的问题 ( @import 'variables')。

Answer 2

摘要

Angular CLI支持所有主要的CSS预处理器,包括sass/scss.只需生成这样的项目,几乎所有东西都可以工作:

ng new sassy-project --style=sass

但是,如果还涉及Karma,则在测试期间不包括全局scss文件.似乎需要一个额外的预处理器来处理这些scss文件.

这对我来说非常混乱,但请注意,有两个类似的预处理器.我不建议'karma-sass-preprocessor',它仍然可以通过npm,但该项目似乎已被弃用.'karma-scss-preprocessor'改为使用(karma-scss-preprocessor)

安装

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

如果之前安装了karma-sass-prepocessor,请首先从package.json中删除它

组态

karma.conf.js

module.exports = function (config) {
  config.set({

    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-jasmine-html-reporter'),
      require('karma-coverage-istanbul-reporter'),
      require('@angular/cli/plugins/karma'),
      require('karma-scss-preprocessor')
    ],

    files: [
      { pattern: './src/test.ts', watched: false },
      { pattern: './src/dummy.scss', watched: true,  included: true, served: true },
      { pattern: './src/styles.scss', watched: true,  included: true, served: true }
    ],
    preprocessors: {
      './src/test.ts': ['@angular/cli'],
      './src/dummy.scss': ['scss'],
      './src/styles.scss': ['scss']
    },

  });
};