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

Question

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

我想在我的 angular 库中设置一个主入口点，这样 link 就更干净了
我想使用 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"
    }
  }

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

@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;

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

@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

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

styleIncludePaths 用于在主应用程序构建期间解析库中的全局样式时使用：https://github.com/ng-packagr/ng-packagr/blob/master/docs/style-include-paths.md. Here is a 详细说明。据我了解，您正在尝试导出您的图书馆自己的 scss 样式 - 因此在这种情况下，styleIncludePaths 将无济于事。
ng-packagr 按原样复制 ./src/lib/scss，这意味着在构建库之后，您应该像这样引用复制的目录： @import '~@ngx-chrono-ui-kit/core/src/lib/scss';。 ng-packagr 如果不存在，应该创建目录树。此外，您不能使用“导出”package.json 配置来缩短 URL，因为它仅适用于 JavaScript 模块而不适用于 scss/css 文件：https://nodejs.org/api/packages.html#exports。

我可以建议的解决方案是将您的图书馆的 /scss 目录移动到图书馆目录的根目录，然后调整您的 ng-packagr 配置以匹配它：

将./projects/<your-project-name>/src/lib/scss移动到./projects/<your-project-name>/scss
将 ng-package.json 中的“资产”配置更改为：

"assets": [
 "./scss"
]

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

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

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

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

Angular library - Ng-packagr: entrypoint and styleIncludePaths

angular

package.json

ng-packagr