ant-design 的引入有两种方式:
方式一: import DatePicker from 'antd/es/date-picker' // 加载js
import 'ant/es/date-picker/style/css' // 加载 css
方式二: import { DatePicker } from 'antd'
通过方式二引入 ant-design 的组件,样式可以通过方式一的方式引入,也可以通过配置 loader 或者 .babelrc 文件来处理,这样两种方式的效果其实是一样的;
loader 中
{
test: /\.js|.jsx$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
},
.babelrc 中如下配置。其中 presets 是对 es6 的解析配置
{
"presets": [
[
"@babel/preset-env",
{
"targets": {
"browsers": [
"> 1%",
"last 5 versions",
"ie >= 8"
]
}
}
],
"@babel/preset-react"
],
{
"plugins": [
["import", {
"libraryName": "antd",
"libraryDirectory": "es",
"style": "css" // `style: true` 会加载 less 文件
}]
]
}
}