按需引入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 ...
随机推荐
- 【刷题】洛谷 P3613 睡觉困难综合征
题目背景 刚立完Flag我就挂了WC和THUWC... 时间限制0.5s,空间限制128MB 因为Claris大佬帮助一周目由乃通过了Deus的题,所以一周目的由乃前往二周目世界找雪辉去了 由于二周目 ...
- shell实践(一)---判断远程服务器中文件是否存在
1.判断一个文件的常见形式为 if [ -f filename ] #此处有-e和-f的区别 注意: 1)中括号之间的空格: 2)filename最好是绝对路径,在判断远程服务器中文件是否存在时尤为 ...
- Android App Architecture使用详解
Android应用架构简介 对于经过过构建app的Android开发人员来说, 现在是时候了解一下构建鲁棒, 质量高的应用的最佳实践和推荐架构了. 这篇文章假设读者对Android framework ...
- 【BZOJ4205】卡牌配对
Description 现在有一种卡牌游戏,每张卡牌上有三个属性值:A,B,C.把卡牌分为X,Y两类,分别有n1,n2张. 两张卡牌能够配对,当且仅当,存在至多一项属性值使得两张卡牌该项属性值互质,且 ...
- VS2010 重命名文件:源文件名和目标文件名相同 的解决方案
想要在“”解决方案资源管理器“”中修改一个已经写好的文件的文件名,如图: 在改了几次后就出现了如图的问题: 然而在“解决方案资源管理器”中并没有看到,于是我打开了工程在磁盘中的位置文件夹: 意外发现了 ...
- 设计模式 (一)——策略模式(Strategy,行为型)
1.概述 使用设计模式可以提高代码的可复用性.可扩充性和可维护性.策略模式(Strategy Pattern)属于行为型模式,其做法是将类所需的行为或者算法一个个封装成单独的类,并将其作为类的数据成员 ...
- 解决Android SDK Manager更新时出现问题
使用SDK Manager更新时出现问题Failed to fetch URL https://dl-ssl.google.com/android/repository/repository-6.xm ...
- Jmeter之性能测试
Jmeter除了可以做接口测试外,还可以做性能测试.在 Jmeter中做性能测试,需要做如下相关设置 图片中有10个线程,Ramp-Up Period(in seconds)=1,那么线程的启动时间间 ...
- bzoj千题计划112:bzoj1022: [SHOI2008]小约翰的游戏John
http://www.lydsy.com/JudgeOnline/problem.php?id=1022 http://www.cnblogs.com/TheRoadToTheGold/p/67448 ...
- Webpack的安装、配置与执行
先用npm安装 npm install webpack -g 然后在项目路径下进行项目安装 npm init # 会自动生成一个package.json文件 npm install webpack - ...