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 文件
}]
]
}
}
