【Ant Design Mobile】引入&测试 - 东南西北

东南西北

整理 思考 行动

【Ant Design Mobile】引入&测试

首页 编程 0 评

安装

进入项目根目录,执行

cnpm install antd-mobile@next --save

测试使用

引入

import {Button} from 'antd-mobile'
import 'antd-mobile/dist/antd-mobile.css'

使用

  add(){
    console.log('test')
  }
render() {
    return (
      <div>
        <Button type="primary" onClick={()=>this.add()}>click</Button>
      </div>
    )
  }

问题

我们注意到,上述代码将Ant Design Mobile的css全部引入了,如何按需引用呢?

解决

使用babel-plugin-import插件解决。
引入

cnpm install babel-plugin-import --save

配置package.json

 "babel": {
    "presets": [
      "react-app"
    ]
  },

修改为:

 "babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
      [
        "import",
        {
          "libraryName": "antd-mobile",
          "style": "css"
        }
      ]
    ]
  }

此时,我们可以删除:

import 'antd-mobile/dist/antd-mobile.css'

【Redux】实例-1