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. POI操作word和html相互转化

    下面是里两个类:第一个类是html转为word,第二个是word转html(最下面附上jar包下载链接) package com.wz.poi.wordHtml; /** * 2018/4/24 * ...

  2. 【堆的启发式合并】【P5290】[十二省联考2019]春节十二响

    Description 给定一棵 \(n\) 个节点的树,点有点权,将树的节点划分成多个集合,满足集合的并集是树的点集,最小化每个集合最大点权之和. Limitation \(1~\leq~n~\le ...

  3. Java基础-IO流对象之随机访问文件(RandomAccessFile)

    Java基础-IO流对象之随机访问文件(RandomAccessFile) 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.RandomAccessFile简介 此类的实例支持对 ...

  4. bzoj千题计划151:bzoj1131: [POI2008]Sta

    http://www.lydsy.com/JudgeOnline/problem.php?id=1131 dp[i]=dp[fa[i]]-son[i]+n-son[i] #include<cst ...

  5. 51nod 1181 质数中的质数

    1181 质数中的质数(质数筛法) 题目来源: Sgu 基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题  收藏  关注 如果一个质数,在质数列表中的编号也是质数,那么就称 ...

  6. hihoCoder #1143 : 骨牌覆盖问题·一

    #1143 : 骨牌覆盖问题·一 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 骨牌,一种古老的玩具.今天我们要研究的是骨牌的覆盖问题:我们有一个2xN的长条形棋盘,然 ...

  7. python学习笔记2-dict

    常用的dict操作: d={'name':'suki', ', 'sex':'man', 'addr':'nanjing' } #字典取值方便,但是字典是没有顺序的,List有下标 print(d[' ...

  8. Java压缩/解压.zip、.tar.gz、.tar.bz2(支持中文)

    本文介绍Java压缩/解压.zip..tar.gz..tar.bz2的方式. 对于zip文件:使用java.util.zip.ZipEntry 和 java.util.zip.ZipFile,通过设置 ...

  9. spring框架学习(七)spring管理事务方式之xml配置

    1.DAO AccountDao.java package cn.mf.dao; public interface AccountDao { //加钱 void increaseMoney(Integ ...

  10. Linux学习-1进程

    在Linux中,在一个程序的内部启动另外一个程序,从而创建一个新进程. 1.这个工作可以通过库函数system来完成. #include<stdlib.h> int system (con ...