按需引入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 ...
随机推荐
- FFT常数优化(共轭优化)
最近闲着无聊研究了下\(FFT\)的常数优化,大概就是各种\(3\)次变\(2or1.5\)次之类的,不过没见过啥题卡这个的吧. 关于\(FFT\)可以看这里:浅谈FFT&NTT. 关于复数 ...
- BZOJ 1180: [CROATIAN2009]OTOCI
1180: [CROATIAN2009]OTOCI Time Limit: 50 Sec Memory Limit: 162 MBSubmit: 989 Solved: 611[Submit][S ...
- Luogu 1429 平面最近点对 | 平面分治
Luogu 1429 平面最近点对 题目描述 给定平面上n个点,找出其中的一对点的距离,使得在这n个点的所有点对中,该距离为所有点对中最小的 输入输出格式 输入格式: 第一行:n:2≤n≤200000 ...
- cpplint
Cpplint是一个Python脚本,作为一款开源免费的代码静态检测工具,Google也使用它作为自己的C++代码检测工具,也就是说,只要你的代码遵从Google C++代码规范,那么Cpplint将 ...
- Non-Local Image Dehazing 复现
本文选自CVPR 2016, 文章链接Dana Berman, Tali Treibitz, Shai Avidan. Non-Local Image Dehazing 复现源码见我的Github 无 ...
- Android 蓝牙模块基础操作
之前没怎么接触过蓝牙模块,在学习的过程中借鉴了很多前辈的经验.本次主要包含以下功能: 1.检测是否存在蓝牙模块 2.蓝牙的开启与关闭 3.与本机已配对的蓝牙设备 4.本机蓝牙可见性设置 5.扫描周围蓝 ...
- laravel 获取所有表名
$tables = DB::connection()->getDoctrineSchemaManager()->listTableNames(); 需要 doctrine/dbal 扩展, ...
- HDU 6006 状压dp
Engineer Assignment Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Othe ...
- 【Asp.net入门07】第一个ASP.NET 应用程序-创建数据模型和存储库
1.理解概念 先理解一下两个概念. 模型 模型是指数据的结构类型,以及可调用的方法.对面向对象编程方法来说,其实就是类.模型类就是一个描述数据的类.只有把数据按一定方式描述出来,我们才能在程序中方便地 ...
- 科学计算三维可视化---Mlab基础(管线控制函数)
科学计算三维可视化---TVTK管线与数据加载(可视化管线和图像管线了解) 科学计算三维可视化---Mayavi入门(Mayavi管线) Mlab管线控制函数的调用 Sources:数据源 Filte ...