在使用 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';
奇怪的是，你会发现明明一样的配置却加载不出样式，翻来覆去，颠来倒去地检查，网上搜索答案 还是找不到原因。今天我将如上配置 放置 .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
