# antd配置按需加载，
antd官方教程:https://ant.design/docs/react/introduce-cn
注意：antd 默认支持基于 ES module 的 tree shaking，不使用以下插件也会有按需加载的效果。
1. babel 插件
~~~yarn
yarn add babel-plugin-import
~~~
2. 配置.babelrc
1. 普通配置
~~~jsoon
// .babelrc or babel-loader option
{
"plugins": [
["import", {
"libraryName": "antd",
"libraryDirectory": "es",
"style": "css" // `style: true` 会加载 less 文件
}]
]
}
~~~
2.next babel配置
~~~json
{
"presets":["next/babel"], //Next.js的总配置文件，相当于继承了它本身的所有配置
"plugins":[ //增加新的插件，这个插件就是让antd可以按需引入，包括CSS
[
"import",
{
"libraryName":"antd",
"style":"css"
}
]
]
}
~~~
## CSS配置
1. 安装nextt插件
~~~yarn
yarn add @zeit/next-css
~~~
2. 创建 next.config.js
~~~JSON
const withCss = require('@zeit/next-css')
if(typeof require !== 'undefined'){
require.extensions['.css']=file=>{}
}
module.exports = withCss({})
~~~