关于配置babel-plugin-import报错的坑及解决
作者:wangyile4399 发布时间:2023-07-02 16:39:01
配置babel-plugin-import报错的坑
用的是antd design vue生成的项目,按着官网的提示一步一步下来,在配置babel-plugin-import时候发生了报错,一直找了很久没有解决问题
问题
项目可以正常运行,当配置babel-plugin-import时的问题
引入可以正常运行
import Button from “ant-design-vue/lib/button”;
import “ant-design-vue/dist/antd.css”;
改成 import { Button } from ‘ant-design-vue’ 时就报错了,所以肯定是配置的问题
报错内容
./node_modules/antd/lib/button/style/index.less (./node_modules/css-loader??ref–6-oneOf-3-1!./node_modules/postcss-loader/src??postcss!./node_modules/less-loader/dist/cjs.js!./node_modules/antd/lib/button/style/index.less)
// https://github.com/ant-design/ant-motion/issues/44
.bezierEasingMixin();
一直以为是less和less-loader的问题,反反复复弄了好久没有办法。
后来发现是配置的问题,被官网坑了
因为用的是vue3.x,所以用了下面的配置方案,style设置为true,所以就发生了报错
错误原因
style设置为true就会报错
解决方案
style设置为“css”
所以我把style设置了上面的css,然后就好了,真的太相信官网的了以为都是没有错的,没想到坑了我8个小时。
babel-plugin-import配置babel按需引入antd模块报错.bezierEasingMixin()
安装yarn add babel-plugin-import
实现按需加载组件代码和样式的babel插件
下载babel-plugin-import插件,然后在webpack.config.dev.js中的plugins添加配置
{
test: /\.(js|mjs|jsx|ts|tsx)$/,
include: paths.appSrc,
loader: require.resolve('babel-loader'),
options: {
customize: require.resolve(
'babel-preset-react-app/webpack-overrides'
),
plugins: [
[
require.resolve('babel-plugin-named-asset-import'),
{
loaderMap: {
svg: {
ReactComponent: '@svgr/webpack?-prettier,-svgo![path]',
},
},
},
],
['import',{libraryName:'antd',style:true}],
],
// This is a feature of `babel-loader` for webpack (not Babel itself).
// It enables caching results in ./node_modules/.cache/babel-loader/
// directory for faster rebuilds.
cacheDirectory: true,
// Don't waste time on Gzipping the cache
cacheCompression: false,
},
},
重启项目后报错:
打开项目package.json发现less版本是^3.0.4
解决方案
将less版本降到3.0以下 比如安装 2.7.3版本。
两种方式:
1.yarn add less@^2.7.3
2.打开项目的package.json 找到dependencies下面的less 将其版本改为 "2.7.3" 然后 yarn install
来源:https://blog.csdn.net/wangyile4399/article/details/89677575


猜你喜欢
- “操作入口明确”,就是指产品的任何一个功能都要有明确、合理的入口。“操作入口”,指的是产品内部不同模块之间的转接元素,例如在Web产品中,按
- 新闻、文章系统中经常会用到的一个功能,添加上一篇,下一篇或相关文章的功能可以增加访客停留的时间。也许新人在做这上一篇、下一篇功能时使用的是I
- vue element-ui动态面包屑导航,供大家参考,具体内容如下直接上代码一、template代码// 这是单独的组件<templ
- 这是一个由加油站油罐传感器测量的油罐高度数据和出油体积,根据体积和高度的倒数,用截面积来描述油罐形状,求出拟合曲线,再用标准数据,求积分来验
- 一直都在网上抄别人写的电话,邮箱正则表达式,今天稍微有点闲情,把一直想自己写个这样的表达式的心愿给完成:/** * 邮箱地址正则表
- 使用Python获取网段的IP个数以及地址清单需要用到IPy的库,而相应的方法主要就是IP。写小脚本如下: from IPy import
- 对于日志的处理,有时候需要把符合条件的日志计入数据库中一、添加pom依赖 <dependency> &
- 一、复制原理主服务器将更新写入二进制日志文件,并维护文件的一个索引以跟踪日志循环。这些日志可以记录发送到从服务器的更新.当一个从服务器连接主
- 我在pycharm中写python代码的时候并不喜欢在运算符前后添加空格,例如我经常就直接写a=3而不是写成a = 3这个样子。对于我而言,
- 利用python进行求解,求解的要求是不能使用python内部封装好的函数例如:maxway1:def findmax(data,n): i
- 引言近期网上这位卖蜂蜜的小伙鬼畜挺火的,大家质疑背景造假,这里我就带着大家实现“背景造假”(PS:原
- 前言最近使用pytorch训练模型,保存模型后再次加载使用出现了一些问题。记录一下解决方案!一、torch中模型保存和加载的方式1、模型参数
- 美化主要表现在鼠标放到菜单上后(即鼠标悬停)的效果,这里首先介绍几个经常用到的CSS属性:backgr
- 本文实例讲述了go语言操作redis连接池的方法。分享给大家供大家参考。具体实现方法如下:func newPool(server, pass
- 这篇论坛文章(赛迪网技术社区)详细讲解了SQL Server海量数据导入的最快方法,更多内容请参考下文:最近做某项目的数据库分析,要实现对海
- 经常写一些联合查询,联合一多了,代码就成倍的增加,时间一长,连我自己也看不懂到底是什么意思了。做Oracle 的时候,就看到有个 WITH,
- 普通滑动验证以http://admin.emaotai.cn/login.aspx为例这类验证码只需要我们将滑块拖动指定位置,处理起来比较简
- 安装在命令提示符框中直接输入pip install beautifulsoup4介绍beautifulsoup是python的一个第三方库,
- 本文实例讲述了python实现linux下使用xcopy的方法。分享给大家供大家参考。具体如下:这个python函数模仿windows下的x
- python保留两位小数:In [1]: a = 5.026In [2]: b = 5.000In [3]: round(a,2)Out[3