Question

我无法配置angular-cli + scss + karma来一起测试我的组件。运行ng test 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。

我怎样才能让它发挥作用？

Answer 1

<强>摘要

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

  });
};

Answer 2

scss中karma的配置完成如下：

module.exports = function(config) {
  config.set({
    files: [
      {
        pattern: 'scss/**/*.scss',
        watched: true,
        included: false,
        served: true
      },
      'test/unit-sass.css'
    ],
    preprocessors: {
      'scss/**/*.scss': ['sass']
    },
    sassPreprocessor: {
      source: 'scss/*.scss',
      createSourceMaps: true,
      outputDir:  __dirname + '/test/',
      outputFile: 'unit-sass.css'
    }    
  });
};

最简单的方法是将karma-sass-preprocessor保留为devDependency中的package.json。

{＆＃34; devDependencies＆＃34;：{＆＃34; karma＆＃34;：＆＃34; ~0.10＆＃34;，＆＃34; karma-sass-preprocessor＆＃34;：＆＃34 ;〜0.0.1＆＃34; }}
您可以通过以下方式轻松完成：

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

然而，sass-preprocessor不值得花时间，并且不是最佳做法，因为问题中的代码应该已经有效，这将在下面解释。

所以在聊天讨论结束时我们终于找到了遗漏的东西，这很愚蠢：

需要（＆＃39;果报SCSS预处理器＆＃39）

这在代码本身中缺失了，他终于设法解决了这个问题！希望它可以帮助任何看待这个答案的未来用户：）

Answer 3

如果将Angira CLI配置为使用sass，则Angular CLI已使用node-sass。因此无需再次安装：

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

应该足够了。另外，您的项目中没有多个版本的node-sass。

solution of @istibekesi的其余部分就像魅力一样。

Answer 4

如果你使用Bootstrap-sass，你应该描述karma.conf.js

preprocessors : {
  './src/test.ts': [ '@angular/cli' ],
  './node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss': [ 'scss' ],
  './src/*.scss': [ 'scss' ]
},

重要的写入顺序是bootstrap比你的文件更快。

Answer 5

成角度的方式

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

将variables.scss导入组件的样式表（@import 'variables'）时遇到了同样的问题。

答案：在angular.json中添加全局文件路径

要将全局scss文件包含到您的（业力）构建中，您应该将这些文件路径添加到angular.json文件中的stylePreprocessorOptions（就像您将这些路径添加到{{1 }}在stylePreprocessorOptions下。

在projects.your-project-name.architect.build.options下复制以下代码段：

projects.your-project-name.architect.test.options

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

5 个答案:

成角度的方式

答案：在angular.json中添加全局文件路径