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

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-preprocessor，首先通过从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。 {“devDependencies”：{“karma”：“~0.10”，“karma-sass-preprocessor”：“~0.0.1”}}
• 您可以通过以下方式轻松完成： npm install karma-sass-preprocessor --save-dev

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

---

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

需要（ '业报SCSS-预处理'）

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

Answer 3

如果将Angular 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（就像您在stylePreprocessorOptions下面的projects.your-project-name.architect.build.options中将这些路径添加到正常构建一样。

复制projects.your-project-name.architect.test.options下面的以下代码段：

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