按需引入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报错问题的更多相关文章
- 按需引入element-ui报错
按需引入element-ui报错 项目用的脚手架是 vue-cli 3 按照官方文档按需引入组件: https://element.eleme.cn/#/zh-CN/component/quickst ...
- vue2.0+按需引入element-ui报错
项目使用vue脚手架自动生成的,vue版本为^2.5.16.项目中需要按需使用element-ui,根据element-ui的官方文档,一开始在babel.config.js文件中修改配置 modul ...
- 【已解决】React项目中按需引入ant-design报错TypeError: injectBabelPlugin is not a function
react项目中ant-design按需加载,使用react-app-rewired的时候报错 运行npm start或者yarn start报如下错误: TypeError: injectBabel ...
- vue-cli3 按需引入 element-ui 报错
报错信息: Cannot find module 'babel-preset-es2015' from .... 解决办法: 安装最新的 Babel 编译插件:@babel/preset-env 修改 ...
- creat-react-app搭建的项目中按需引入antd以及配置Less和如何修改antd的主题色
在creat-react-app搭建的项目环境中按需引入antd以及配置less,首先需要暴露出来webpack文件.(此操作不可逆). create-react-app myapp 创建同一个rea ...
- delphi 调用Webservice 引入wsdl 报错 document empty
delphi 调用Webservice 引入wsdl 报错 document empty 直接引入wsdl 地址报错 document empty 解决办法:在浏览器里保存为xml文件,然后在开发环境 ...
- 新引入thinkphp报错“应用目录[./Application/]不可写,目录无法自动生成! 请手动生成项目目录~”
新引入thinkphp报错“应用目录[./Application/]不可写,目录无法自动生成! 请手动生成项目目录~”, 其主要原因是文件夹的权限问题,手动将项目文件夹权限更改为可读可写就OK,具体操 ...
- php Yaf_Loader::import引入文件报错的解决方法
php Yaf_Loader::import引入文件报错的解决方法 改下配置文件就行<pre>yaf.use_spl_autoload=1</pre> 也可以PHP动态修改 毕 ...
- electron-vue 引入OpenLayer 报错 Unexpected token export
electron-vue 引入OpenLayer 报错 Unexpected token export 解决办法: 在 .electron-vue/webpack.renderer.config.js ...
随机推荐
- P4248 [AHOI2013]差异 解题报告
P4248 [AHOI2013]差异 题目描述 给定一个长度为 \(n\) 的字符串 \(S\),令 \(T_i\) 表示它从第 \(i\) 个字符开始的后缀.求 \[\displaystyle \s ...
- FourAndSix: 2.01靶机入侵
0x01 前言 FourAndSix2是易受攻击的一个靶机,主要任务是通过入侵进入到目标靶机系统然后提权,并在root目录中并读取flag.tx信息 FourAndSix2.镜像下载地址: htt ...
- redis协议
Redis的通讯协议可以说大集汇了……消息头标识,消息行还有就行里可能还有个数据块大小描述.首先Redis是以行来划分,每行以\r\n行结束.每一行都有一个消息头,消息头共分为5种分别如下: (+) ...
- WEB入门.八 背景特效
学习内容 background属性 CSS Sprite 技术 滑动门技术 能力目标 使用background设置网页背景 使用Sprites制作平滑投票特效 使用滑动门技术实现Tab菜单 本章简介 ...
- myeclipse2015修改web项目部署名
在旧版本的myeclipse中修改web项目部署名很方便,直接右键在properties中查找web就能进行修改. 但是myeclipse2015中发现不能直接修改了. 我们可以点击config,或者 ...
- windows 10 enterprise 企业版 mak激活密钥
企业版用户请依次输入: slmgr /ipk NPPR9-FWDCX-D2C8J-H872K-2YT43 slmgr /skms kms.xspace.in slmgr /ato
- 初学SQL语句练习1
--[1 ]查询出每个月倒数第三天受雇的所有员工SELECT * FROM EMP WHERE HIREDATE=LAST_DAY(HIREDATE)-2; --[2 ]找出早于30 年前受雇的员工S ...
- Java基础-IO流对象之转换流(InputStreamReader与OutoutStreamWriter)
Java基础-IO流对象之转换流(InputStreamReader与OutoutStreamWriter) 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.转换流概述 我们之前 ...
- C++程序运行时间测定
From:http://www.cnblogs.com/killerlegend/p/3877703.html Author:KillerLegend Date:2014.7.30 此处程序的测试时间 ...
- [网络流24题] 最长k可重区间集
https://www.luogu.org/problemnew/show/3358 以区间(1,5),(2,6),(7,8)为例 建模方法一: 建模方法二: 离散化区间端点 相当于找k条费用最大的不 ...