angular.json 包含路径不适用于 node_modules答案

【问题标题】：angular.json includePaths is not workings for node_modulesangular.json 包含路径不适用于 node_modules
【发布时间】：2021-09-17 05:32:19
【问题描述】：

我有一个 Angular 库，其中包含我想要使用的样式，就好像它们是应用程序的一部分一样。我尝试使用 includePaths 来通过在 angular.json 中使用以下配置来做到这一点：

{
    projects: {
        "my-project": {
                "root": "",
                "sourceRoot": "src",
                "prefix": "mp",
                "architect": {
                    "build": {
                        "builder": "@angular-devkit/build-angular:browser",
                        "options": {
                            "outputPath": "dist/selenium-agent-ui",
                            "index": "src/index.html",
                            "main": "src/main.ts",
                            "polyfills": "src/polyfills.ts",
                            "tsConfig": "tsconfig.app.json",
                            "stylePreprocessorOptions": {
                                "includePaths": [
                                    "src/assets",
                                    "node_modules/ui-library/assets"
                                ]
                            },
...

在我的 scss 样式文件中，我想写以下内容：

@import "assets/ui-library-folder/ui-library-scss-file"

但是，我收到以下错误：

Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
  ╷
1 │ @import "assets/ui-library-folder/ui-library-scss-file";
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src\app\app.component.scss 1:9  root stylesheet

文件夹结构：

my-app
|--node_modules
|  |--ui-library
|  |  |--assets
|  |  |  |--ui-library-folder
|  |  |  |  |--ui-library-scss-file.scss
|--src
|  |--app
|  |  |--app.component.scss
|  |--assets
|  |  |--...
|--angular.json
|--package.json
|--tsconfig.json
|--tsconfig.app.json

我已尝试根据这些链接中提供的解决方案工作，但它们不起作用：

https://www.digitalocean.com/community/tutorials/angular-shortcut-to-importing-styles-files-in-components

Angular 8 ignores includePaths

Shorten SCSS import path in Angular 7

https://github.com/angular/angular-cli/issues/5798

How to short path to file in Angular?

【问题讨论】：

标签： angular sass

【解决方案1】：

问题是包含资产的路径

替换：

"src/assets",
"node_modules/ui-library/assets"

与

"src",
"node_modules/ui-library"

或更改导入路径。即：

@import "ui-library-folder/ui-library-scss-file";

代替：

@import "assets/ui-library-folder/ui-library-scss-file"

【讨论】：