Angular 库 - Ng-packagr：入口点和 styleIncludePaths

Question

大家好，2022 年新年快乐！我目前正在研究我的角度库，尽管有文档和我花费时间寻找解决方案，但我似乎无法解决两个问题。这就是我想要实现的目标：

1. 我想在我的角度库中设置一个主要入口点，以便链接更清晰
2. 我想使用ng-packagr中的styleIncludePaths来缩短我的 SCSS 导入

这就是我当前的架构：

// ng-package.json

{
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/core",
  "lib": {
    "entryFile": "src/public-api.ts",
    "styleIncludePaths": [
      "./src/lib/scss"
    ]
  },
  "assets": [
    "./src/lib/scss"
  ]
}

// 包.json

"name": "@ngx-chrono-ui-kit/core",
...
"exports": {
    ".": {
      "sass": "./lib/scss/_index.scss"
    }
  }

所以我目前以这种方式调用我的库（“src”文件夹在 dist 中不存在）：

@import '~@ngx-chrono-ui-kit/core/lib/scss';

但我想改变它，使它看起来像这样：

@import '~@ngx-chrono-ui-kit/core';

遗憾的是，使用上述配置它不起作用：

其次，在我的组件（即：components/ActionBar/action-bar.component.scss）中，我调用我在 SCSS 文件夹中定义的 SCSS 定义：

@use '../../scss/abstracts/variables' as variables;
@use '../../scss/abstracts/colors' as colors;
@use '../../scss/abstracts/typography' as typography;
@use '../../scss/abstracts/mixins' as mixins;
@use '../../scss/abstracts/functions' as functions;

我想缩短链接，使它们看起来像这样：

@use 'abstracts/variables' as variables;
@use 'abstracts/colors' as colors;
@use 'abstracts/typography' as typography;
@use 'abstracts/mixins' as mixins;
@use 'abstracts/functions' as functions;

但我的 IDE 实际上警告我它无法解析导入（并且在构建时，它也不起作用）：

如果您在我的配置中发现错误，请随时做出反应

Answer 1

你好，也祝你新年快乐！:) 至于你的问题：

1. styleIncludePaths当您想在主应用程序构建期间解析库中的全局样式时使用： https: //github.com/ng-packagr/ng-packagr/blob/master/docs/style-include-paths.md。这是用户 Fy Z1K 提供的非常详细的解释。据我了解，您正在尝试导出库自己的 scss 样式 - 所以在这种情况下，styleIncludePaths不会有帮助。
2. ng-packagr按原样复制./src/lib/scss，这意味着在构建库后，您应该像这样引用复制的目录： @import '~@ngx-chrono-ui-kit/core/src/lib/scss';. ng-packagr如果目录树不存在，则应创建它。另外，您无法使用“exports”package.json配置来缩短 URL，因为它仅适用于 JavaScript 模块，而不适用于 scss/css 文件： https: //nodejs.org/api/packages.html#exports。

我建议的解决方案是将库的/scss目录移动到库目录的根级别，然后调整ng-packagr配置以匹配：

1. 搬去./projects/<your-project-name>/src/lib/scss​./projects/<your-project-name>/scss
2. 将您的“资产”配置更改ng-package.json为：

"assets": [
 "./scss"
]

编译库后，您应该能够将复制的/scss目录引用为~@ngx-chrono-ui-kit/core/scss.

当然，将目录向上移动一些级别将需要您更改对/scss库源代码中对该目录的所有引用。

我偶然发现了同样的问题，这是我目前唯一的解决方案。