解决ng test执行时，在scss文件导入时出现错误的问题的方法

这篇备忘录是关于在使用Angular项目时，通过ng test命令使用Karma + Jasmine进行单元测试时遇到的问题。

本文假定Angular的测试工具为Karma + Jasmine。

请问有什么问题吗？

假设执行ng test命令时，出现以下错误。

ERROR in ./src/app/app.component.scss
Module build failed (from ./node_modules/sass-loader/lib/loader.js):

@import 'theme';
^
      File to import not found or unreadable: theme.
      in /Users/xxxx/project/src/app/app.component.scss (line 1, column 1)
 @ ./src/app/app.component.ts 16:21-52
 @ ./src/app/app.component.spec.ts
 @ ./src sync \.spec\.ts$
 @ ./src/test.ts

假设所指的 SCSS 文件如下所示。

@import 'theme';

h1 {
  color: $main;
}

下面是用于导入主题的 SCSS 文件。

$main: red;

为了通过使用根相对路径在angular.json的architect.build.options中的stylePreprocessorOptions.includePaths添加任意路径来编写类似于app.component.scss中的@import ‘theme’;。

"architect": {
  "build": {
    "builder": "@angular-devkit/build-angular:browser",
    "options": {
      "stylePreprocessorOptions": {
        "includePaths": [
          "src/theme/default"
        ]
      },
...

解决方案 (jiě jué àn)

与 `architect.build.options` 相同，我们将 `stylePreprocessorOptions.includePaths` 设置到 `architect.test.options` 中。

"test": {
  "builder": "@angular-devkit/build-angular:karma",
  "options": {
    "stylePreprocessorOptions": {
      "includePaths": 
        "src/theme/default"
      ]
    },
...

只要添加以上描述，执行ng test，Karma就会开始运行。

请从下面选择一个选项：

1. 参照
2. 参考资料
3. 参考书目
4. 参考指南
5. 参考案例