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报错问题的更多相关文章

  1. 按需引入element-ui报错

    按需引入element-ui报错 项目用的脚手架是 vue-cli 3 按照官方文档按需引入组件: https://element.eleme.cn/#/zh-CN/component/quickst ...

  2. vue2.0+按需引入element-ui报错

    项目使用vue脚手架自动生成的,vue版本为^2.5.16.项目中需要按需使用element-ui,根据element-ui的官方文档,一开始在babel.config.js文件中修改配置 modul ...

  3. 【已解决】React项目中按需引入ant-design报错TypeError: injectBabelPlugin is not a function

    react项目中ant-design按需加载,使用react-app-rewired的时候报错 运行npm start或者yarn start报如下错误: TypeError: injectBabel ...

  4. vue-cli3 按需引入 element-ui 报错

    报错信息: Cannot find module 'babel-preset-es2015' from .... 解决办法: 安装最新的 Babel 编译插件:@babel/preset-env 修改 ...

  5. creat-react-app搭建的项目中按需引入antd以及配置Less和如何修改antd的主题色

    在creat-react-app搭建的项目环境中按需引入antd以及配置less,首先需要暴露出来webpack文件.(此操作不可逆). create-react-app myapp 创建同一个rea ...

  6. delphi 调用Webservice 引入wsdl 报错 document empty

    delphi 调用Webservice 引入wsdl 报错 document empty 直接引入wsdl 地址报错 document empty 解决办法:在浏览器里保存为xml文件,然后在开发环境 ...

  7. 新引入thinkphp报错“应用目录[./Application/]不可写,目录无法自动生成! 请手动生成项目目录~”

    新引入thinkphp报错“应用目录[./Application/]不可写,目录无法自动生成! 请手动生成项目目录~”, 其主要原因是文件夹的权限问题,手动将项目文件夹权限更改为可读可写就OK,具体操 ...

  8. php Yaf_Loader::import引入文件报错的解决方法

    php Yaf_Loader::import引入文件报错的解决方法 改下配置文件就行<pre>yaf.use_spl_autoload=1</pre> 也可以PHP动态修改 毕 ...

  9. electron-vue 引入OpenLayer 报错 Unexpected token export

    electron-vue 引入OpenLayer 报错 Unexpected token export 解决办法: 在 .electron-vue/webpack.renderer.config.js ...

随机推荐

  1. 分享关于js解析URL中的参数的方法

    function GetQueryString(name) { var reg = new RegExp("(^|&)" + name + "=([^&] ...

  2. Mysql向数据库插入数据时,判断是否存在,若不存在就插入数据

    表中一定要有主键  : select :id,此处的id位置处必须是主键 insert into table_name(id, name, password) select :id, :name, : ...

  3. 【BootStrap】Table的基本使用

    一.前言        新年新气象,转眼今年就28了,不知道今年能不能把妹成功呢?哈哈哈!上班第一天,部门Web技术主管给每个同事都发了红包鼓励大家今年加油,我作为新转入部门员工不能给团队掉链子,要加 ...

  4. linux中的分段和分页

    http://blog.csdn.net/hguisu/article/details/6152921 Linux 内存管理 觉得这篇文章写分段和分页机制还是挺清晰的,在此转载一下. 前一段时间看了& ...

  5. 理解 OAuth 2.0

    理解OAuth 2.0 http://www.ruanyifeng.com/blog/2014/05/oauth_2_0.html 一.简介 OAuth是一个关于授权(authorization)的开 ...

  6. Linux系统之路Centos7.2——安装QQ 的一些问题(附VMware的安装)

    1.首先安装wine 可以通过源码安装,注意在编译的时候加参数,编译64位(如果你的系统是64位哦!) 但是我建议直接rpm安装. 安装网络源: rpm -ivh epel-release-6-8.n ...

  7. shiro权限认证与授权

    什么是shiro? Shiro是apache旗下一个开源框架,它将软件系统的安全认证相关的功能抽取出来,实现用户身份认证,权限授权.加密.会话管理等功能,组成了一个通用的安全认证框架. 为什么要用sh ...

  8. NO.4day LINUX centos 文件基本操作

    LINUX centos 文件基本操作 1 LINUX简介 Linux的定义:Linux是一套免费使用和自由传播的类Unix操作系统,是一个基于POSIX和UNIX的多用户.多任务.支持多线程和多CP ...

  9. Oracle的基本语法,存储函数及触发器

    1.PL/SQL    PL/SQL是Oracle对 ql语言的过程化扩展,指在 SQL 命令语言中增加了过程处理语句,使SQL语言具有过程处理能力.把 SQL 语言的数据操纵能  力与过程语言的数据 ...

  10. 转:Block原理及引用循环问题

    2010年WWDC发布iOS4时Apple对Objective-C进行了一次重要的升级:支持Block.说到底这东西就是闭包,其他高级语音例如Java和C++已有支持,第一次使用Block感觉满简单好 ...