如何配置 Karma 以包含 angular-cli 项目的全局 scss 文件? [英] How to configure Karma to include global scss files for an angular-cli project?

问题描述

我无法配置 angular-cli + scss + karma 来一起测试我的组件.运行 ng test，kamra 单元测试只包含组件自己的 scss 样式.

I cannot configure angular-cli + scss + karma to test my components together. Running ng test the kamra unit tests are only including the components' own scss styles.

为了在测试中应用我的主要 style.scss，我尝试在 karma.conf.js 中配置它们:

In order to apply my main styles.scss in tests, I've tried to configure them in 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 被应用.

Main scss is still not included during karma tests. But the components own scss and the global css are applied.

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

How can I make it work?

推荐答案

NO NPM PACKAGE: Angular Way

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

NO NPM PACKAGE: Angular Way

Add files in the angular.json-file within the stylePreprocessorOptions-property.

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

I was running into the same problem when importing my variables.scss into the stylesheets of my components (@import 'variables').

这篇关于如何配置 Karma 以包含 angular-cli 项目的全局 scss 文件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！