如何使用Angular CLI使CSS类名称不可读

Question

我找到了一个Webpack模块https://github.com/webpack-contrib/css-loader#css-modules 能够重命名类名并使类名不可读。

我在https://stackoverflow.com/a/14751344/5369031处找到了答案，但我很好奇我们如何在ng build --prod期间在Angular CLI中实现相同的目标？

不可读的意思是：

Answer 1

https://github.com/webpack-contrib/css-loader#css-modules所做的就是启用CSS Modules。

我能够在Angular 8应用程序中实现CSS Modules（也可以在Angular 7或更高版本中实现），感谢@angular-builders/custom-webpack自定义构建，然后使用postcss-modules和posthtml-css-modules。

postcss-modules散列所有样式，然后posthtml-css-modules用散列的类名替换html文件上的类名。

我在这里记录了解决方案：

• 现场演示：https://angular-css-modules.herokuapp.com/
• Github存储库：https://github.com/gquinteros93/angular-css-modules
• 逐步介绍的文章：https://indepth.dev/angular-css-modules/

我希望它对您有用。