Vue/cli4.5版本升级采坑(2) - less-loader版本过高；引入less全局变量。

最新推荐文章于 2024-05-05 18:24:35 发布
最新推荐文章于 2024-05-05 18:24:35 发布
阅读量3.5k 收藏 3
点赞数 1
分类专栏： 前端开发 文章标签： vue less npm
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sherleysong/article/details/115937452
版权
在将Vue从2.6.x降级过程中，遇到less-loader版本过高导致的`this.getOptions is not a function`错误。解决方法是将less-loader降级到5.0.0。此外，引入less全局变量`@background-white`时，需配置全局变量文件。推荐使用Vue CLI的`add`命令自动配置，或者手动创建`vue.config.js`文件引入`var.less`。
摘要由CSDN通过智能技术生成

前提：vue2.6.x
注：由于vue3.0.0 对应的mint-ui的版本无法使用，所以还是做了vue降版本处理。

1. this.getOptions is not a function

安装less-loader 默认版本过高导致报错在这里插入图片描述

 npm i less less-loader --save-dev
...
+ less-loader@8.1.1
+ less@4.1.1

直接安装less-loader 版本过高，会导致如下问题：
Syntax Error: TypeError: this.getOptions is not a function
@ ./node_modul

最低0.47元/天 解锁文章
宋燕sherleysong
关注
专栏目录
在项目中安装、使用less-loader、less用于处理less格式文件
m0_63174618的博客
03-22 1205
好了，这就是整理的前端从入门到放弃的学习笔记，还有很多没有整理到，我也算是边学边去整理，后续还会慢慢完善，这些相信够你学一阵子了。做程序员，做前端工程师，真的是一个学习就会有回报的职业，不看出身高低，不看学历强弱，只要你的技术达到应有的水准，就能够得到对应的回报。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】学习从来没有一蹴而就，都是持之以恒的，正所谓活到老学到老，真正懂得学习的人，才不会被这个时代的洪流所淘汰。
vue less安装_解决旧Vue项目升级less-loader 6.0.0报错
weixin_39763953的博客
12-12 697
作为一个爱折腾的主，我的package随时都是ncu -u！何为ncu，就是检查nodejs npm/yarn项目依赖最新版本package.json一个插件！这不，前几天less-loader 升级了最新版，我也迫不及待升级。升级最新版软件依赖有很多好处，总之作为一个开发者你发布新版本肯定是升级改造的工作，项目正常点都是变更好。但经常会踩坑！比如把几天前的Vue项目升级成最新版依赖以后，esli...
less和less-loader版本搭配
Father_Of_Soft的博客
03-02 3794
less为4版本时，less-loader为5~7没有问题，我安装的是7版本。
关于less和less-loader依赖的版本问题
enhenglhm的博客
09-15 2234
突然一下出错了，本来还好好的。。。 WARN Couldn't parse bundle asset "D:\vue_proj\vue_shop_proj\dist\js\chunk-vendors.js". Analyzer will use module sizes from stats file. 百度了一下又说是vue-cli版本问题，于是执行 npm install -g @vue/cli 但是安装后还是不行 于是又发现有人说可能是less和less-loader依赖可能会版本不..
Vue踩坑，less与less-loader安装，版本不一致
最新发布
cxr的博客
05-05 1096
1) npm uninstall less与 npm uninstall less-loader。3) OK，启动vue项目。
vue-cli配置全局sass、less变量的方法
10-16
对于 Sass，Vue CLI 提供了一种直接在 `vue.config.js` 中配置全局变量的方法。在 `vue.config.js` 中添加如下代码： ```javascript module.exports = { ... css: { loaderOptions: { sass: { // '@' 是 ...
在vue-cli3.0 中使用预处理器 (Sass/Less/Stylus) 配置全局变量操作
11-19
在Vue CLI 3.0中，使用预处理器如Sass、Less或Stylus来配置全局变量是一项常见的任务，这可以提升CSS代码的可维护性和复用性。Vue CLI在项目初始化时允许你选择预处理器，但即使未选择，内部的webpack配置也能处理...
vue-cli4使用全局less文件中的变量配置操作
01-18
在Navgation.vue中使用global.less中的变量 vue-cli3的配置方法如下：传送门 vue-cli4的配置方法如下： 安装 style-resources-loader npm i style-resources-loader -D 在 vue.config.js 中加上如下配置，没有则...
在使用vue-cli创建项目时，less和vue-router版本问题记录
qq_38958284的博客
02-17 782
使用vue-cli创建项目后，我选择的版本是vue2，基本的vue-router没有选，后面手动下载的，然后因为版本过高，npm自动给我安装的vue-router的版本为4.x，npm提示我需要装vue3才能用router，所以我又重新使用vue create创建了一个项目，对照了一下脚手架自动给我安装的版本： "vue-router": "^3.2.0", 后面，我把less和less-loader都按照npm的要求装好后，将vue-router的版本按照上面的命令降级了。 装好vue-route
serverless版本升级
funnyPython的博客
09-14 256
serverles 2.0 版本来了，http-api payload的默认值从1.0改成了2.0.其他一些内容见参考。 参考： https://github.com/serverless/serverless/releases/tag/v2.0.0 https://www.serverless.com/framework/docs/providers/aws/events/http-api/ https://docs.aws.amazon.com/apigateway/latest/developergu
39-2 Webpack —Less loader 的 配置
Bi-Hu的博客
08-01 211
如果我们希望在项目中使用less、scss、stylus来写样式， 我们这里以less为例，其他也是一样的。 我们还是先创建一个less文件，依然放在css文件夹中： 这里 创建了 Less 并且 写了 样式。 老样子 我们在入口写入依赖 让webpack解析并打包： 然后我们安装 对应的 loader ： 语句安装less 和 lessloader：【记得降低版本 不然报错 】 ...
vue-cli3下 iview 引用全局less 变量覆盖 报错
Ray_Huang
06-15 1131
跟着iview官网做了覆盖变量用的less文件 在main.js中引入 对应变量覆盖文件会报错，解决方案如下，修改vue.config.js: //vue.config.js module.exports = { css: { loaderOptions: { less: { javascriptEnabled...
vue 项目全局引入 less文件时报错
qq_34465778的博客
07-30 975
用vue-cli搭建的项目，在main.js中引入less文件时却一直报错，如下图：
Vue Cli3.0 全局引入 less 变量
任磊
11-09 926
我们开发过程中经常会使用很多 less 全局样式，但是 vue 文件中想使用 less 变量，就需要挨个引入，极其麻烦。 现在我来揭秘： 1. 定义一个 themes.less 文件，将你想用的全局变量装入其中 @primary-color: #32b642; // 全局主色 @link-color: #32b642; // 链接色 @warning-color: #faad14; // 警告色 @error-color: #f5222d; // 错误色 @font-size-base: 14px;
vue 安装less和sass
CCKing7的博客
12-29 1178
vue 安装less和sass
@vue/cli3.x使用less报错问题
weixin_46681026的博客
10-06 158
使用less需要下载less与less-loader npm install less less-loader --save-dev 这样下载的话运行之后会回报错，原因是loader版本太高，降低版本就可以了 卸载less-loader npm uninstall less-loader 安装less-loader npm install less-loader@7.x --save-dev vue-cli2.x的话看这里 地址：https://www.cnblogs.com/wangshishuai/
vue-cli 配置预处理器全局变量(以less为例)
weixin_44708870的博客
10-04 1414
vue官方提供了两种方法 1.style-resources-loader 2.vue-cli-plugin-style-resources-loader 使用第一种方法自己通过npm安装经常会出现报错： TypeError: Cannot read property 'style-resources-loader' of undefined 或者 variable xxx is undefined 所以，删除style-resources-loader(虽然vue-cli-plugin的插件.
vue-cli项目中安装less和less-loader版本过高不可以用问题
qq_48009509的博客
08-08 3155
在Vue CLI可视化界面中直接安装less和less-loader依赖会发现可以安装成功，但是后续使用的时候会提示less-loader版本过高问题 解决方法 1. 对于less可以直接在可视化界面中安装即可 2. less-loader可以在项目根目录下打开windows powershell使用命令安装指定版本的less-loader，想要安装什么版本就在@后输入什么版本，这里安装的是6.2.0版本 npm install less-loader@6.2.0 --save-dev 安装成功后
当我输入npm list vue -g后，显示以下信息 C:\Program Files\nodejs\node_global +-- @vue/cli@4.5.14 +-- vue@3.3.4 `-- vue-cli@2.9.6 但是输入vue -V却显示2.9.6
07-16
根据你提供的信息，当你运行 `npm list vue -g` 命令时，显示了三个全局安装的 Vue.js 相关包：`@vue/cli@4.5.14`、`vue@3.3.4` 和 `vue-cli@2.9.6`。 然而，当你运行 `vue -V` 命令时，显示的版本号是 `2.9.6`。这可能是因为全局安装的 `vue-cli@2.9.6` 的命令行工具与 Vue.js 的版本号混淆了。 为了解决这个问题，你可以尝试以下几个步骤： 1. 首先，卸载全局安装的 `vue-cli@2.9.6` 包。可以使用以下命令进行卸载： ``` npm uninstall -g vue-cli@2.9.6 ``` 2. 然后，再次运行 `vue -V` 命令，确保显示的版本号是你期望的版本（例如 `3.3.4`）。 3. 如果问题仍然存在，你可以尝试使用 `which vue` 命令来查看当前系统中哪个 `vue` 可执行文件被使用。然后，确认该可执行文件所在的路径是否正确，并且没有与旧版本的 Vue.js 冲突。 4. 如果需要，你还可以尝试手动更新全局安装的 Vue.js 相关包，使用以下命令进行更新： ``` npm update -g @vue/cli ``` 请注意，如果你在项目中使用了局部安装的 Vue.js，全局安装的 Vue.js 版本与局部安装的版本可能会有所不同。确保在项目中使用正确的版本，并根据需要进行相应的更新和调整。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值