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

在 karma 测试期间仍然不包括主 scss。 但是组件自己的scss和全局css被应用。

我怎样才能让它工作？

Answer 1

karma中scss的配置如下：

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

---

所以在聊天的讨论结束时，我们终于发现缺少了什么，这很愚蠢：

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

引导程序比您的文件更快的写入顺序很重要。

Answer 4

如果你将 Angular CLI 配置为使用 sass，它已经使用了 node-sass。所以不需要重新安装：

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

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

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

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')。