我无法配置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']
},});
};
