在自定义角度库中使用Postcss

时间:2020-03-30 18:29:10

标签: angular webpack postcss rollupjs ng-packagr

我使用postcsspostcss-css-modulesposthtml-css-modules在Angular应用程序中实现CSS模块。我还使用@angular-builders/custom-webpack实现了这一目标。

现在,我想对“自定义角度库”进行同样的操作。但是,我不能使用@angular-builders/custom-webpack,因为Angular库是使用ng-packagr构建的。

因此,@angular-builders/custom-webpack无法使用:https://github.com/just-jeb/angular-builders/issues/356

另一方面,ng-packagr不支持postcsshttps://github.com/ng-packagr/ng-packagr/issues/1471

我已阅读到可以在rollup中扩展ng-packagr的配置(在构建结束时使用ng-packagr的编译器):

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

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

有人知道怎么做吗?

我认为的其他解决方案是,使所有样式变为全局样式,并像我在此处使用scss-bundle

那样使用NodeJs Script that compiles scss files fails because of postcss rule for undefined variables和postcss进行编译。

在我可以使用lodash之后,我将能够用其散列的类名替换类名,如此处建议的:Use [hash:base64:5] in JavaScript / TypeScript file

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

有人知道怎么做吗?

任何其他解决方案都值得欢迎。

先谢谢了。

1 个答案:

答案 0 :(得分:0)

已经有关于此增强功能的讨论。可能变化仍在进行中。您可以从here

进行跟踪

您可以预处理样式,然后按照此article的建议传递给ng-packagr

HTML文件嵌入的其他问题,您可以使用this来创建类似tools的后期构建过程

我希望这可以解决您的问题。