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

Question

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

1. 我想在我的 Angular 库中设置一个主入口点，以便链接更清晰
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"
  ]
}

// package.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。这是一个详细的very good explanation by user 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 目录的所有引用。

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