antd-mobile按需加载样式和自定义样式

antd-mobile

引入css的样式的两种方式

在入口处引入样式

// 一般入口文件是index.js
import 'antd-mobile/dist/antd-mobile.css';  // or 'antd-mobile/dist/antd-mobile.less'

或者下面这种方式引入样式

和上面的方法不同的地方就是，上面是直接从包文件的路径中引入样式，这个方法是将安装包里面lib目录下的antd-mobile.css复制到项目中指定的文件夹下（如style文件夹）

这样做的有点是可以在打包的时候编译指定文件夹下面的css

{
  test: /\.css$/,
  include: path.resolve(__dirname, 'src/styles'),
  use: [
    'style-loader',
    'css-loader',
  ],
}

但是上面两种引入样式的做法都不能做到按需加载，antd内部会在浏览器的控制台提示警告，并推荐安装babel-plugin-import

利用babel-plugin-import

• 使用 babel-plugin-import（推荐）。

// .babelrc or babel-loader option
{
  "plugins": [
    ["import", { "libraryName": "antd-mobile", "style": "css" }] //