1.使用create-react-app工具創建了一個項目
create-react-app antd-demo
2.安裝babel-plugin-import
npm install babel-plugin-import --dev
3.按需引用antd
在App.js里面引入,
import { Button } from 'antd';
package.json里面配置babel
"babel": {
"plugins": [
[
"import",
{
"libraryName": "antd",
"style": true
}
]
]
},
最后項目啟動報錯,報錯信息如下
./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”就可以了
這里的style可以為true或者‘css’,但是不知道為什么使用true就報錯,
babel-plugin-import配置,options可以為數組
{
"plugins":[["import",options]]
}
導入js模塊:
["import", { "libraryName": "antd" }]
導入js和css模塊(LESS/Sass源文件):
["import", { "libraryName": "antd", "style": true }]
導入js和css模塊(css 內置文件):
["import", { "libraryName": "antd", "style": "css" }]
