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

Question

I've seen similar questions asked but none have resolved my issue...

I'm trying to eliminate relative paths in my SCSS imports. So instead of:

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

I'd like it to be:

@use "mixins" as queries;

I found this article but their solution does not work.

My angular.json file:

"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": []
          },

I still receive the error

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

Is it even possible to eliminate relative paths in Angular, and if so how do I accomplish this? Like the question states, I'm using Angular v14.

Answer 1

Your includePaths already contains src/styles/abstracts so you don't need to repeat that in your import. You can just do @import "mixins"; and it will look for a mixins file in any of your includePath directories.

The way you have it setup right now, Angular is basically trying to look for a file located at: src/styles/abstracts/src/styles/abstracts/mixins

If you want to be a bit clearer in your imports you can change angular.json's config to look like:

"includePaths": [
  "src/styles"
]

and use this import:

@import "abstracts/mixins";