角库- 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"
  ]
}

// package.json

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

因此，我目前正在以这种方式调用lib (“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样式--因此，在本例中，help.
2. ng-packagr将不按原样复制./src/lib/scss，这意味着在构建库之后，您应该引用复制的目录，如：@import '~@ngx-chrono-ui-kit/core/src/lib/scss';。如果目录树不存在，ng-packagr应该创建它。此外，您不能使用“导出”https://nodejs.org/api/packages.html#exports.

配置来缩短package.json配置，因为它只适用于JavaScript模块，而不适用于JavaScript/css文件：

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

./projects/<your-project-name>/scss

• Change

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

"assets": [
 "./scss"
]

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

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

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