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. [HDU4787]GRE Words Revenge 解题报告

    这是我之前博客里提到的一道AC自动机的练手题,但是要完成这道题,我之前博客里提到的东西还不够,这里总结一下这道题. 这道题不是一般的裸的AC自动机,它的询问和插入是交叉出现的所以用我之前写的板子不大合 ...

  2. Alpha 完结撒花 —— 事后诸葛亮

    写在前面 林燊大哥 一路走来,好不容易,终于完结了. 设想和目标 我们的软件要解决什么问题?是否定义得很清楚?是否对典型用户和典型场景有清晰的描述? 解决的问题 用户在进店之前无法得知店铺的优劣,通过 ...

  3. Android 图片加载框架 Glide 的用法

    https://github.com/bumptech/glide Android图片加载框架最全解析(一),Glide的基本用法http://blog.csdn.net/guolin_blog/ar ...

  4. 解题:SDOI 2010 魔法猪学院

    题面 题外话:神**可持久化左偏树,你谷的人都太神了,学不来 我把这个当做A*模板题的说,先讲一讲个人对A*的理解:如果说普通的BFS是Bellman_Ford,那A*就是一个Dijkstra.以寻找 ...

  5. bzoj 3928: [Cerc2014] Outer space invaders

    $f[i][j]$表示消灭起始时间在$(i,j)$内的外星人所花费的最小代价. 考虑在这个区间内距离最远的外星人h,在他的区间中一定要选一个点要开一炮,而且这一炮可以顺便把其他跨过这个点的敌人消灭,剩 ...

  6. C++ 实现vector<std:string> 版本

    #include <iostream> #include <vector> #include <memory> #include <thread> #i ...

  7. 一些程序OEP入口特征

    声明: 1.本文中使用的例子来源于吾爱破解的官方教程第一课中的无壳例子,本人利用空闲时间挨个进行查看并截图纪录下来 2.欢迎补充讨论 一些程序OEP入口特征 一.       AMS程序 1.载入PE ...

  8. tp5.1 入口文件即报错

    ---------------------------------------------------------------[ 2018-10-10T10:51:49+08:00 ] 218.93. ...

  9. 发现视口(窗口)自适应的新大陆!!vw、vh

    从事前端已经1年了,一直为背景自适应铺满整个屏幕而苦苦发愁,因为要适配不同的pc显示器,所以高度不能写死,但是写(height:100%)并不能实现,愁死我了~我要不用写好的css框架实现或者自己写j ...

  10. 解析Job,bpmn文件的小项目总结

    1.在使用String类中split(String regex)切割字符串abcd.job遇得到job字符串时,直接使用split("."),导致数组超出界限错误 原因:得到的数组 ...