1.使用create-react-app工具建立了一个项目javascript
create-react-app antd-demo
2.安装babel-plugin-importcss
npm install babel-plugin-import --dev
3.按需引用antdjava
在App.js里面引入,node
import { Button } from 'antd';
package.json里面配置babelreact
"babel": { "plugins": [ [ "import", { "libraryName": "antd", "style": true } ] ] },
最后项目启动报错,报错信息以下git
./node_modules/antd/lib/button/style/index.less Module build failed: // https://github.com/ant-design/ant-motion/issues/44 .bezierEasingMixin(); ^ Inline JavaScript is not enabled. Is it set in your options? in E:\webstrom\migu\ngoc\web\react-interface\react-interface-cli\node_modules\antd\lib\style\color\bezierEasing.less (line 110, column 0)
最后把"style":“css”就能够了github
这里的style能够为true或者‘css’,可是不知道为何使用true就报错,web
babel-plugin-import配置,options能够为数组npm
{ "plugins":[["import",options]] }
导入js模块:json
["import", { "libraryName": "antd" }]
导入js和css模块(LESS/Sass源文件):
["import", { "libraryName": "antd", "style": true }]
导入js和css模块(css 内置文件):
["import", { "libraryName": "antd", "style": "css" }]