angular - 如何在 Angular 中缩短文件路径？

Question

在我导入的一些 CSS 文件中:

@import "../../../theme.scss"
@import "../../theme.scss"
@import "../../../../../../theme.scss"
@import "../theme.scss"

如何在所有情况下都使用相对路径作为绝对路径:

@import "theme.scss"

我完整的 angulr.json 代码是:

"reon-core": {
      "projectType": "library",
      "root": "projects/reon-core",
      "sourceRoot": "projects/reon-core/src",
      "prefix": "lib",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-ng-packagr:build",
          "options": {
            "stylePreprocessorOptions": {
              "includePaths": ["./projects/reon-core/src/lib/tssource/"]
            },
            "tsConfig": "projects/reon-core/tsconfig.lib.json",
            "project": "projects/reon-core/ng-package.json"
          }
        }

....它返回Data path ""should NOT have additional properties(stylePreprocessorOptions).;

Answer 1

只需在angular.json文件中添加stylePreprocessorOptions的路径即可:

"architect": {
        "build": {
          ...
          "options": {
            ...
            "stylePreprocessorOptions": {
              "includePaths": [
                "./src/assets/style/theme"
              ]
            },
         },
         "test": {
           ...
           "options": {
             ...
             "stylePreprocessorOptions": {
               "includePaths": [
                 "./src/assets/style/theme"
               ]
             }
           }
         }
}

然后你应该能够包含你的文件，如 @import 'app-theme.scss';

• 要了解更多信息，请阅读:https://github.com/angular/angular-cli/wiki/stories-global-styles
• 官方文档:https://angular.io/guide/workspace-config

描述更改后更新

我想你设置了错误的相对路径。您的根文件夹应该是 reon-core。因此，您需要像这样设置 stylePreprocessorOptions:

"includePaths": ["./src/lib/tssource/"]

在 build 和 test 中

设置好之后，你可以把任何主题文件放在那里，喜欢:

./src/lib/tssource/theme.scss 并像 @import 'theme.scss';

一样导入它