1. Create a project using the create-react-app tool
|
1
|
create-react-app antd-demo |
2. Install babel-plugin-import
|
1
|
npm install babel-plugin-import --dev |
3. Quote antd on demand
Introduced in App.js,
|
1
|
import { Button } from 'antd'; |
Configure babel in package.json
|
1
2
3
4
5
6
7
8
9
10
11
|
"babel": { "plugins": [ [ "import", { "libraryName": "antd", "style": true } ] ] }, |
Finally, an error was reported when the project started, and the error message is as follows
|
1
2
3
4
5
6
7
8
|
./node_modules/antd/lib/button/style/index.lessModule 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) |
Finally put “style”: “css” on it
The style here can be true or’css’, but I don’t know why I use true and I get an error.
babel-plugin-import configuration, options can be an array
|
1
2
3
|
{ "plugins":[["import",options]] } |
Import the js module:
|
1
|
["import", { "libraryName": "antd" }] |
Import js and css modules (LESS/Sass source files):
|
1
|
["import", { "libraryName": "antd", "style": true }] |
Import js and css modules (css built-in files):
|
1
|
["import", { "libraryName": "antd", "style": "css" }] |