Angular单元测试中SCSS样式导入错误的解决求助

执行ng test时出现如下错误：

./src/app/modules/auth/components/login/login.component.scss?ngResource - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Can't find stylesheet to import.
@import "styles"

组件SCSS代码：

@import "styles";

.login-container {
  @extend .center-page;
}

根目录src/styles.scss内容：

@import "node_modules/angular-notifier/styles";

@import "./utils/variables";
@import "./utils/extends";
@import "./utils/mixins";

解决方法 #

• 配置angular.json测试环境的样式搜索路径
  打开项目根目录的angular.json，找到test配置节点，在options中添加stylePreprocessorOptions指定Sass的搜索根目录，同时确保styles数组包含根样式文件：

  "test": {
    "builder": "@angular-devkit/build-angular:karma",
    "options": {
      // 保留原有其他配置
      "styles": [
        "src/styles.scss"
      ],
      "stylePreprocessorOptions": {
        "includePaths": [
          "src"
        ]
      }
    }
  }
  

  配置完成后，Sass会自动在src目录下查找导入的样式文件，组件中的@import "styles"就能正确匹配src/styles.scss。

• 使用相对路径导入（临时替代方案）
  如果上述配置不生效，可根据组件目录层级，用相对路径直接指向根样式文件。例如从login.component.scss到src/styles.scss的相对路径为../../../../styles（需根据实际项目目录结构调整层级）：

  @import "../../../../styles";
  
  .login-container {
    @extend .center-page;
  }
  

• 验证@extend目标类的存在性
  确认src/utils/extends.scss中确实定义了.center-page类，避免样式导入成功后出现@extend找不到目标类的后续错误：

  // src/utils/extends.scss示例代码
  .center-page {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }
  

内容的提问来源于stack exchange，提问作者Michał