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

发布时间：2020-12-17 18:00:06 所属栏目：安全来源：网络整理

导读：我无法配置angular-cli scss业力来测试我的组件.运行ng测试kamra单元测试仅包括组件自己的scss样式. 为了在测试中应用我的主要styles.scss,我尝试在karma.conf.js中配置它们： files: [ { pattern: './src/test.ts',watched: false },{ pattern: './src/styl

我无法配置angular-cli scss业力来测试我的组件.运行ng测试kamra单元测试仅包括组件自己的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.

我怎样才能使它工作？

解决方法

摘要

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',{ pattern: './src/dummy.scss',watched: true,included: true,served: true },{ pattern: './src/styles.scss',served: true }
    ],preprocessors: {
      './src/test.ts': ['@angular/cli'],'./src/dummy.scss': ['scss'],'./src/styles.scss': ['scss']
    },});
};

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!