在使用 antd-mobile中俩功，加載組件及組件的樣式有多種引入方式，手動引入和按需加載(官方推薦的使用方式)碰声。
一诡蜓、按需加載
1、使用npm 安裝babel-plugin-import： npm i --save-dev babel-plugin-import;
2奥邮、在 .babelrc 中加入如下配置：
// .babelrc or babel-loader option
{
"plugins": [
["import", { libraryName: "antd-mobile", style: "css" }] // style: true`會加載 less 文件
]
}
3万牺、然后只需從 antd-mobile 引入模塊即可，無需單獨引入樣式洽腺。
// babel-plugin-import 會幫助你加載 JS 和 CSS
import { DatePicker } from 'antd-mobile';
奇怪的是脚粟，你會發(fā)現(xiàn)明明一樣的配置卻加載不出樣式，翻來覆去蘸朋，顛來倒去地檢查核无，網(wǎng)上搜索答案 還是找不到原因。今天我將如上配置 放置 .roadhogrc 中藕坯，便可以正常加載出antd-mobile的樣式了团南，以下是我的配置：
{
"entry": "src/index.js",
"env": {
"development": {
"extraBabelPlugins": [
"dva-hmr",
"transform-runtime",
[
"import", {
"libraryName": "antd-mobile",
"style": true // `style: true` 會加載 less 文件
}
]
]
},
"production": {
"extraBabelPlugins": [
"transform-runtime",
[
"import", {
"libraryName": "antd-mobile",
"style": true // `style: true` 會加載 less 文件
}
]
]
}
}
}
二噪沙、手動引入
import DatePicker from 'antd-mobile/lib/date-picker'; // 加載 JS
import 'antd-mobile/lib/date-picker/style/css'; // 加載 CSS
