Ng-zorro-antd: consider to reduce size of final css file?

[tempura-shrimp]

consider to reduce size of final css file?

Hi, thank you for this awesome lib. Yet, the css file contain a lot of unused styles, including those of components that not been used, which result in 100-200k redundant css data in final output.

Is there any plan to purify css in output process?

[ng-zorro-bot]

Hello @lincanli, your issue has been closed because it does not conform to our issue requirements. Please use the Issue Helper to create an issue, thank you!

[LiadIdan]

@lincanli if you're using Less/custom theme you can use this workaround for now:

1. create new folder named ant-design
2. if you're using custom theme move the theme.less file to the folder and get rid of the import line at the top @import "../node_modules/ng-zorro-antd/ng-zorro-antd.less";
3. create new components.less file inside the ant-design folder and copy all the imports from node_modules/ng-zorro-antd/components.less file. (make sure to fix the import path for all the components. e.g. @import "./card/style/index.less"; should become @import "../../node_modules/ng-zorro-antd/card/style/index.less";)
4. comment out all the imports of components that you're not using. (don't comment out the import of core component)
5. create new index.less file inside the ant-design folder and paste there the following imports:

@import "../../node_modules/ng-zorro-antd/style/index.less";
@import "./components.less";
@import "./theme.less";    <--- only if you're using a custom theme 

1. add the path of the index.less file to the styles list in the angular.json file, and remove the one of the theme.less if you have it.
2. if you're adding a new component that you didn't use before just go back to the components.less file and uncomment its import

[tempura-shrimp]

@LiadIdan but much of the redundant css are in "../../node_modules/ng-zorro-antd/style/index.less" file

[wendellhu95]

Closed by #3234.