在自定义 Angular 库中使用 Postcss

Question

我使用postcss、postcss-css-modules和posthtml-css-modules在 Angular 应用程序中实现 CSS 模块。我还使用了@angular-builders/custom-webpack来实现这一点。

现在，我想对我的自定义 Angular 库做同样的事情。但是，我不能使用@angular-builders/custom-webpack，因为 Angular 库是使用ng-packagr构建的。

所以，@angular-builders/custom-webpack不能使用：https : //github.com/just-jeb/angular-builders/issues/356

另一方面，ng-packagr不支持postcss：https : //github.com/ng-packagr/ng-packagr/issues/1471

我已阅读，它可以延长汇总配置（就是使用编译器NG-packagr在构建结束）在NG-packagr：

https://github.com/ng-packagr/ng-packagr/blob/master/docs/DESIGN.md#rollup-config

但我没有找到任何文档来实现这一点。

有人知道怎么做吗？

我认为的其他解决方案，它使所有样式全局化并使用scss-bundle和 postcss编译它们，就像我在这里所做的那样：NodeJs Script that compiles scss files failed because of postcss rule for undefined variables

如果我可以使用lodash，我将能够用散列类名替换类名，就像这里建议的那样：在 JavaScript / TypeScript 文件中使用 [hash:base64:5]

但要做到这一点，我需要知道如何在ng-packagr的构建中调用lodash。

有人知道怎么做吗？

任何其他解决方案都非常受欢迎。

提前致谢。

Answer 1

已经有关于此增强功能的讨论。也许改变仍在进行中。您可以从这里追踪

您可以按照本文的建议预处理您的样式，然后传递给 ng-packagr

嵌入 HTML 文件的其他问题，您可以在这些工具的帮助下创建类似这样的构建后过程

我希望这能解决您的问题。