问题
I used postcss, postcss-css-modules and posthtml-css-modules to implement CSS Modules in a Angular Application. I also used @angular-builders/custom-webpack to achieved this.
Now, I want to do the same with my Custom Angular Library. However, I cannot use @angular-builders/custom-webpack because the Angular Libraries are build using ng-packagr.
So, @angular-builders/custom-webpack is not available to use: https://github.com/just-jeb/angular-builders/issues/356
On the other hand, ng-packagr does not support postcss: https://github.com/ng-packagr/ng-packagr/issues/1471
I have read that it's possible to extend rollup config (is the compiler that use ng-packagr at the end of the build) in ng-packagr:
https://github.com/ng-packagr/ng-packagr/blob/master/docs/DESIGN.md#rollup-config
But I didn't find any documentation to achieve this.
Does anybody know how to do it?
Other solution that I thought, it's make all the styles global and compile them using scss-bundle and postcss like I did here: NodeJs Script that compiles scss files fails because of postcss rule for undefined variables
And after If I can use lodash I will be able to replace the class names by their hashed class name like is proposed here: Use [hash:base64:5] in JavaScript / TypeScript file
But to do that, I will need to know how to invoke lodash in the build of ng-packagr.
Does anybody knows how to do that?
Any other solution is more than welcome.
Thanks in advance.
回答1:
There is already a discussion going on this enhancement. May be changes are still in progress. You can track from here
You can pre-process your styles and then pass to ng-packagr as suggested by this article
Other problem to embed with HTML files you can use create a post build process something like this with help of these tools
I hope this solves your problem.
来源：https://stackoverflow.com/questions/60937107/use-postcss-in-custom-angular-library