angular - 在自定义 Angular 库中使用 Postcss

标签 angular webpack postcss rollupjs ng-packagr

我用了postcss , postcss-css-modulesposthtml-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

我已经读到可以扩展 rollup 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 fails because of postcss rule for undefined variables

之后如果我可以使用 lodash我将能够用它们的散列类名替换类名,就像这里建议的那样:Use [hash:base64:5] in JavaScript / TypeScript file

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

有人知道该怎么做吗?

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

提前致谢。

最佳答案

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

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

嵌入 HTML 文件的其他问题,您可以使用创建后期构建过程,例如 this借助这些 tools

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

关于angular - 在自定义 Angular 库中使用 Postcss,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60937107/

相关文章:

routing - 带有标签的 Angular2 路由到页面 anchor

Angular2 更改 node_modules 路径

angular - 外部化 Angular 2 环境配置的最现代方式?

javascript - Webpack 配置不接受配置模式选项

javascript - 预期参数的类型为 `array`,但收到的类型为 `string` - image-webpack-loader

google-chrome - SVG 在 Chrome 中透明,适用于其他浏览器

带有 less 和 postcss autoprefixer 的 webpack

html - Angular 2为元素分配动态类

postcss - 在包裹上发布 css autoprefixer 问题未显示前缀

Angular2 - 使用路由器导出名称时路由不起作用