如何设置按需加载样式

Question

老师您好，请问代码库生成的css是全部的样式吧？如何按需加载样式呢?比如我在其他项目中引入该组件库中的1个组件，不需要把所有的样式都引入吧？

Answer 1

业火之理 2020-07-02 02:09:32

一般都是按需加载js，很少有按需加载css，按需加载css也能完成，但是有很多缺点，比如会增多网络请求。

按需加载css很简单，将所有样式分组件分开写各自导入组件就完事了。编译出来一个组件配着一个css，就是完全的按需加载css了。当然你也可以考虑css in js的做法，完全无css，直接用js写css，就是完全的按需加载css了。

• 提问者 慕婉清2507852 #1

  非常感谢！

Answer 2

张轩 2020-07-02 11:17:36

楼上的同学说的很好 

我们的样式的 sass 文件都是分开编写的 所以按需加载理论上应该是没有问题的 同学可以使用 antd 的 babel-plugin-import 来实现类似的功能 https://www.npmjs.com/package/babel-plugin-import

• 业火之理 #1

  antd的babel/ts-plugin-import 其实只是按需加载了js，并没有做到按需加载css，因为antd把sideeffects里样式全部过滤掉了，所以如果只导入antd一个组件，且import设置true或者css/less，会把antd所有css全部拉来。