Angular 14中如何消除SCSS/SASS导入的相对路径？

问题说明 #

我尝试过查找类似问题但未解决，希望将SCSS中的长相对路径导入简化：
原本的导入写法：

@use "../../../../styles/abstracts/mixins" as queries;

想要改为简洁的形式：

@use "mixins" as queries;

我已配置angular.json但仍报错，相关配置片段如下：

"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
  "build": {
    "builder": "@angular-devkit/build-angular:browser",
    "options": {
      "outputPath": "dist/email",
      "index": "src/index.html",
      "main": "src/main.ts",
      "polyfills": "src/polyfills.ts",
      "tsConfig": "tsconfig.app.json",
      "assets": [
        "src/assets"
      ],
      "styles": [
        "src/styles/main.css"
      ],
      "stylePreprocessorOptions": {
        "includePaths": [
          "src/styles/abstracts",
          "src/styles/base",
          "src/styles/layout",
          "src/styles/themes"
        ]
      },
      "scripts": []
    },

当前收到的报错信息：

Error: Can't find stylesheet to import.
1 │ @import "src/styles/abstracts/mixins";;
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  page-not-found.component.scss 1:9  root stylesheet

请问Angular是否支持消除导入的相对路径？若可行，Angular 14下该如何实现？

解决方案 #

1. 修正语法错误与基础配置检查 #

首先注意报错中的导入语句多了一个分号，先修正为@import "src/styles/abstracts/mixins";（不过我们最终要替换为@use写法）。同时确认mixins.scss文件确实存在于src/styles/abstracts目录下，路径大小写与系统匹配（区分大小写的系统需严格一致）。

2. 利用stylePreprocessorOptions实现简化导入 #

你已配置includePaths，该配置会让SCSS预处理器自动在指定目录下查找文件，因此可以直接使用文件名导入：

@use "mixins" as queries;

注意：配置修改后必须重启ng serve开发服务器，否则配置不会生效。

如果觉得维护多个includePaths麻烦，可以将路径简化为src/styles，后续导入时只需添加子目录前缀，层级更清晰：

"stylePreprocessorOptions": {
  "includePaths": [
    "src/styles"
  ]
}

对应导入写法：

@use "abstracts/mixins" as queries;

3. 可选：配置TS路径别名统一风格 #

若想和TypeScript的路径别名保持一致，可在tsconfig.json中添加配置：

"compilerOptions": {
  "baseUrl": "./",
  "paths": {
    "@styles/*": ["src/styles/*"]
  }
}

之后SCSS中可使用更直观的别名导入：

@use "@styles/abstracts/mixins" as queries;

Angular 14完全支持该方式，且能让TS与SCSS的路径规则统一。

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