在自定义 Angular 库中使用 Postcss
Posted
技术标签:
【中文标题】在自定义 Angular 库中使用 Postcss【英文标题】:Use Postcss in Custom Angular Library 【发布时间】:2020-07-11 05:00:54 【问题描述】:我使用 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 中扩展rollup 配置(是在构建结束时使用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 fails because of postcss rule for undefined variables
如果我可以使用lodash 之后,我将能够用它们的散列类名替换类名,就像这里建议的那样:Use [hash:base64:5] in javascript / TypeScript file
但要做到这一点,我需要知道如何在 ng-packagr 的构建中调用 lodash。
有人知道怎么做吗?
任何其他解决方案都非常受欢迎。
提前致谢。
【问题讨论】:
ng-packagr 已经在使用 postcss。 github.com/ng-packagr/ng-packagr/blob/master/src/lib/styles/…。你想达到什么目标? 嗨@GouravGarg,感谢您的回答。我想在我的 Angular 库的构建中使用 postcss-css-modules 和 posthtml-css-modules。你知道这是否可能吗? 我能够在 Angular 项目中使用 postcss-css-modules 和 posthtml-css-modules,这要归功于 @angular-builders/custom-webpack。但是,我不能在 Angular 库的构建中使用 @angular-builders/custom-webpack,因为我不知道如何在自定义 Angular 的构建中使用 postcss-css-modules 和 posthtml-css-modules图书馆。 可能对你有点帮助github.com/ng-packagr/ng-packagr/issues/643 让我们continue this discussion in chat. 【参考方案1】:已经有关于此增强功能的讨论。可能变化仍在进行中。您可以从here跟踪
您可以按照article 的建议对样式进行预处理,然后传递给 ng-packagr
嵌入 HTML 文件的其他问题,您可以在这些 tools 的帮助下创建类似 this 的后期构建过程
我希望这能解决你的问题。
【讨论】:
感谢您的回答。这里的问题是github.com/css-modules/… 在构建期间执行。在 ng-packagr 构建 Angular 库之后,所有模板 (HTML) 都被嵌入,我需要修改这些模板。您是否有在构建期间或之后修改模板的想法? 如果所有应用程序都存在此问题,并且所有应用程序的这些变量都相同。如果适合您,您可以永久更新 HTML 文件。 这不是一个合适的解决方案,因为如果这样做,我将用它们的散列类名替换原始类名,并且我需要保留原始类名。我想在构建期间或之后在 dist 文件中用哈希类名替换类名。您对此案有什么想法/解决方案吗?以上是关于在自定义 Angular 库中使用 Postcss的主要内容,如果未能解决你的问题,请参考以下文章
如何为 Angular 7 包含额外的 postCSS 插件(postcss-preset-env)
如何使用 ControlValueAccessor Angular 在自定义输入中使用指令
在自定义验证中使用 Angular JS + Laravel 检查当前密码
ASP.NET Core 3:如何在自定义库中引用 3.0.0 程序集?