19React——AntDesign（按需加载样式⽂件）
在上篇⽂章中我们简单介绍了Ant Design组件的使⽤，但是在使⽤过程中我们在样式⽂件中直接加载了全部的Antd样式⽂件，这对于前端页⾯来说并不符合其开发要求，接下来我们介绍css样式⽂件的按需加载。
1 ⾸先，我们需要在项⽬⽂件中安装⾃定义配置的⼯具。在项⽬⽂件夹中打开命令⾏⼯具，输⼊“npm install react-app-rewired --save”，如图：
2 然后修改package.json⽂件中的配置，如图：
3 修改完配置后在项⽬的根⽬录下新建⼀个名为“config-overrides.js”⽂件，先不要在此⽂件中添加任何代码，放置在此处。
4 然后安装按需加载组件代码和样式的babel插件。在命令⾏中输⼊“npm install babel-plugin-import --save”如图：
5 最后，在刚才新建的js⽂件中添加如下的代码，如图：
const { injectBabelPlugin } = require('react-app-rewired');
config = injectBabelPlugin(
['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }],
config,
);
ant安装包return config;
};
6 我们删除之前在index.css⽂件头部添加的“@import '~antd/dist/antd.css';”这⾏代码，重新启动项⽬。如图：
7 此时，按需加载环境已经配好，我们需要组件时，只需在相关⽂件中引⼊此组件的包，然后实例化此组件即可。例如，我们在主页组件中添加⼀个卡⽚，我们只需引⼊Card的包，然后粘贴官⽹代码即可，并不需要在引⼊css样式那些，因为在引⼊的包中⾃带了样式代码，并且仅仅⾃带了卡⽚的样式代码，这就是按需加载，⼤⼤降低了浏览器的承载⼒，如图：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。