按需引入antd报错问题

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" }]

巴特西

按需引入antd报错问题

最新文章

热门文章