如何在Angular中缩短文件路径? [英] How to short path to file in Angular?

问题描述

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

In some CSS files I have import:

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

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

How to use relative path as absolute path everywhere for all cases:

@import "theme.scss"

我的完整angulr.json代码是:

My full angulr.json code is:

"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).;

推荐答案

只需在angular.json文件中将路径添加到stylePreprocessorOptions:

Just add the path to the stylePreprocessorOptions in the angular.json file:

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

然后，您应该可以包含@import 'app-theme.scss';

Then you should be able to include your file like @import 'app-theme.scss';

• 有关详细信息，请阅读: https://github.com/angular/angular-cli/wiki/stories-global-styles
• 官方文档: https://angular.io/guide/workspace-config

• For more insights read this: https://github.com/angular/angular-cli/wiki/stories-global-styles
• Official documentation: https://angular.io/guide/workspace-config

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

I suppose you set the wrong relative path. Your root folder should be reon-core. Therefore you need to set the stylePreprocessorOptions like that:

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

在build和test

设置后，您可以在其中放入任何主题文件，例如:

After you set this, you can put in any theme file there and like:

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

这篇关于如何在Angular中缩短文件路径?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！