如何配置 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' ]
}

Main scss 仍未包含在业力测试中。但是组件自己的 scss 和全局 css 被应用。

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

Answer 1

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'
    }    
  });
};

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

{ "devDependencies": { "karma": "~0.10", "karma-sass-preprocessor": "~0.0.1" } }
您可以通过以下方式轻松完成：

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

但是 sass-preprocessor 不值得花时间而且确实不是最佳实践，因为问题中的代码应该已经可以工作了，这将在下面解释。

所以在聊天讨论的最后我们终于发现了缺少的东西，这很愚蠢：

require('karma-scss-preprocessor')

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

Answer 2

总结

Angular CLI 支持所有主要的 CSS 预处理器，包括 sass/scss。像这样简单地生成项目，几乎所有的东西都会工作：

ng new sassy-project --style=sass

但是，如果还涉及 Karma，则在测试期间不包括全局 scss 文件。 karma 似乎需要一个额外的预处理器来处理这些 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 3

如果你使用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 4

Angular 如果您将其配置为使用 sass，则 CLI 已使用 node-sass。所以不需要重新安装:

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

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

的其余部分很有魅力。

Answer 5

没有 NPM 包：Angular 方式

在 stylePreprocessorOptions-属性中的 angular.json- 文件中添加文件。

projects.your-project-name.architect.build.options和projects.your-project-name.architect.test.options应该是一样的：

{
  "projects": {
    "your-project-name": {
      "architect": {

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

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

        ...

      },
      ...
    },
    ...
  },
  ...
}

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

在将 variables.scss 导入我的组件 (@import 'variables') 的样式表时，我运行遇到了同样的问题。

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

How to configure Karma to include global scss files for an angular-cli project?

sass

karma-runner

angular-cli

angular

没有 NPM 包：Angular 方式