如何缩短 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"
          }
        }

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

Answer 1

您可以通过添加到 tsconfig.json {compilerOptions: {path: HERE!!} }

"paths": {
  "core-js/es7/reflect": ["node_modules/core-js/proposals/reflect-metadata"],
  "core-js/es6/*": ["node_modules/core-js/es/*"],
  "@swagger/*": ["src/app/_swagger/*"],
  "@swagger": ["src/app/_swagger/index.ts"],
  "@directives/*": ["src/app/_directives/*"],
  "@services/*": ["src/app/_services/*"],
  "@models/*": ["src/app/_models/*"],
  "@tables/*": ["src/app/tables/*"],
  "@tables_services/*": ["src/app/tables/services/*"],
  "@shared/*": ["src/app/shared/*"],
  "@language/*": ["src/app/_language/*"],
  "moment": [
    "node_modules/moment/min/moment.min.js"
  ]
}

Answer 2

只需在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';

一样导入

Answer 3

假设您的 theme.scss 位于 src/styles/theme.scss 或 src/assets/styles/theme.scss。

将此路径添加到 angular.json 如下所示

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

现在可以直接使用路径导入了@import 'theme.scss'

Answer 4

        "stylePreprocessorOptions": {
          "includePaths": [
            "src/assets/styles",
            "src/assets/styles/theme.scss"
          ]

从 src/PATH/theme.scss 编辑样式文件的路径比重建你的项目重新启动后我的意思是你可以像这样以你的风格使用它 @import "theme";

Answer 5

If the shortened path does not work, try to build the project or restart the code editor e.g. VS Code.

tsconfig.json:

{
    "CompilerOptions": {
        "baseUrl": "src",
        "paths": {
            "@core/*": ["app/core/*"]
            "@services/*": ["app/services/*"]
        }
    }
    # ...
}

posts.component.ts:

import { SeoService } from '@core/seo.service.ts';
import { PostsService } from '@services/posts.service.ts';

如何缩短 Angular 中文件的路径？

How to short path to file in Angular?

angular

angular5

angular8

描述更改后更新