在自定义Angular库中使用Postcss

Question

我使用 postcss, postcss-css-modules 和 posthtml-css-modules 来在 Angular 应用程序中实现 CSS Modules。我还使用了 @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 中扩展 rollup 配置的内容（这是在构建末尾使用的编译器）：

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

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

有人知道如何做吗？

我想到的另一个解决方案是将所有样式都设为全局，并使用scss-bundle和postcss编译它们，就像我在这里所做的那样：NodeJs Script that compiles scss files fails because of postcss rule for undefined variables

之后，如果我可以使用lodash，我将能够用哈希类名替换它们，就像这里提出的那样：Use [hash:base64:5] in JavaScript / TypeScript file

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

有人知道如何做吗？

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

提前致谢。

- German Quinteros

---

ng-packagr已经在使用postcss。https://github.com/ng-packagr/ng-packagr/blob/master/src/lib/styles/stylesheet-processor.ts。你想要实现什么？ - Gourav Garg

我能够在Angular项目中使用postcss-css-modules和posthtml-css-modules，这要归功于@angular-builders/custom-webpack。然而，在构建Angular库时，我无法使用@angular-builders/custom-webpack，因此我不知道如何在自定义Angular库的构建中使用postcss-css-modules和posthtml-css-modules。 - German Quinteros

直到那时，您可以使用postcss预处理这些样式，然后将其传递给您的库。这可能会对您有所帮助 https://medium.com/@Dor3nz/compiling-css-in-new-angular-6-libraries-26f80274d8e5 - Gourav Garg

是的，那很有用。但是，我还需要对组件的HTML进行一些更改。我可以使用lodash来实现，问题是我不知道如何做，因为HTML是在构建之后嵌入的。 你知道如何实现吗？ 是否存在像scss-bundle这样的编译器来处理HTML？提前致谢。 - German Quinteros

让我们在聊天中继续这个讨论。 - Gourav Garg

Answer 1

这个增强功能已经有讨论了，可能还在进行中。你可以从这里跟踪。

你可以预处理你的样式，然后按照这篇文章的建议传递给ng-packagr。

如果要嵌入HTML文件的其他问题，你可以使用创建一个后期构建过程，类似于这个，借助这些工具。

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

- Gourav Garg

---

感谢您的回答。问题在于 https://github.com/css-modules/postcss-modules#integration-with-templates 在构建期间执行。在 ng-packagr 构建 Angular 库之后，所有模板（HTML）都被嵌入其中，我需要修改这些模板。您有没有想过在构建期间或之后修改这些模板的想法？ - German Quinteros

如果所有应用程序都存在此问题，并且这些变量对于所有应用程序都相同。您可以永久更新HTML文件，如果适合您的话。 - Gourav Garg

那不是一个合适的解决方案，因为如果我这样做，我将用它们的哈希类名替换原始类名，而我需要保留原始类名。 我想在构建期间或在dist文件中之后用哈希类名替换类名。 你有任何想法/解决方案吗？ - German Quinteros