在自定义 Angular 库中使用 Postcss

2024-04-06

I used postcss https://postcss.org/, postcss-css-模块 https://github.com/css-modules/postcss-modules and posthtml-css-模块 https://github.com/posthtml/posthtml-css-modules在 Angular 应用程序中实现 CSS 模块。我也用过@Angular-builders/自定义-webpack https://github.com/just-jeb/angular-builders/blob/7.x.x/packages/custom-webpack/README.md达到这个目的。

现在,我想对我的自定义角度库做同样的事情。但是,我不能使用@Angular-builders/自定义-webpack https://github.com/just-jeb/angular-builders/blob/7.x.x/packages/custom-webpack/README.md因为 Angular 库是使用构建的ng-packagr https://github.com/ng-packagr/ng-packagr.

So, @Angular-builders/自定义-webpack https://github.com/just-jeb/angular-builders/blob/7.x.x/packages/custom-webpack/README.md无法使用:https://github.com/just-jeb/angular-builders/issues/356 https://github.com/just-jeb/angular-builders/issues/356

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

我读到可以延长rollup https://rollupjs.org/config(是使用的编译器ng-packagr https://github.com/ng-packagr/ng-packagr在构建结束时)ng-packagr https://github.com/ng-packagr/ng-packagr:

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

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

有人知道该怎么做吗?

我想到的其他解决方案是使所有样式全局化并使用它们进行编译scss 捆绑包 https://github.com/reactway/scss-bundle和 postcss 就像我在这里所做的那样:由于未定义变量的 postcss 规则,编译 scss 文件的 NodeJs 脚本失败 https://stackoverflow.com/questions/60712566/nodejs-script-that-compiles-scss-files-fails-because-of-postcss-rule-for-undefin

如果我可以使用之后lodash https://github.com/lodash/lodash我将能够用散列类名替换类名,如下所示:在 JavaScript / TypeScript 文件中使用 [hash:base64:5] https://stackoverflow.com/questions/60512235/use-hashbase645-in-javascript-typescript-file

但要做到这一点,我需要知道如何在构建中调用 lodashng-packagr https://github.com/ng-packagr/ng-packagr.

有人知道该怎么做吗?

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

提前致谢。


已经有关于此增强功能的讨论。也许改变仍在进行中。您可以追踪来自here https://github.com/ng-packagr/ng-packagr/issues/643

您可以预处理您的样式,然后按照此建议传递给 ng-packagrarticle https://medium.com/@Dor3nz/compiling-css-in-new-angular-6-libraries-26f80274d8e5

嵌入 HTML 文件的其他问题,您可以使用创建一个构建后过程,例如this https://github.com/alan-agius4/ng-mono-repo-starter/blob/master/tools/tasks/build.ts在这些的帮助下tools https://github.com/css-modules/postcss-modules#integration-with-templates

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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在自定义 Angular 库中使用 Postcss 的相关文章

随机推荐