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

问题描述

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

I cannot configure angular-cli + scss + karma to test my components together. Running ng test the kamra unit tests are only including the components' own scss styles.

为了在测试中应用我的主要styles.scss，我尝试在karma.conf.js中对其进行配置:

In order to apply my main styles.scss in tests, I've tried to configure them in 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' ]
}

业力测试期间仍不包括Main scss.但是组件拥有自己的scss，并且应用了全局css.

Main scss is still not included during karma tests.But the components own scss and the global css are applied.

我如何使它工作?

推荐答案

摘要

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

Angular CLI supports all major CSS preprocessors, including sass/scss. Simply generate the project like this and almost everything will work:

ng new sassy-project --style=sass

但是，如果还涉及Karma，则在测试期间不包括全局scss文件.看来，因果报应处理这些scss文件需要附加的前任.

However, if Karma is also involved, during tests the global scss files are not included. It seems an additional prepocessor is required for karma to process these scss files.

这对我来说非常令人困惑，但是请注意，那里有两个类似的预处理器.我不推荐'karma-sass-preprocessor'，它仍然可以通过npm获得，但是该项目似乎已被弃用.改用'karma-scss-preprocessor'( karma-scss-preprocessor )

It was very confusing for me, but note there are two similar preprocessors out there. I do not recommend 'karma-sass-preprocessor', it is still available via npm, but the project seems to be deprecated.Use 'karma-scss-preprocessor' instead (karma-scss-preprocessor)

安装

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

如果您之前安装过karma-sass-prepocessor，请先通过将其从package.json中删除来进行卸载

If you installed karma-sass-prepocessor before, first uninstall it by removing from package.json

配置

karma.conf.js

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']
    },

  });
};

这篇关于如何配置Karma以包括angular-cli项目的全局scss文件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！