Vue-cli 通过ui图形界面安装了less和less-loader但是编译less文件依然编译失败

最新推荐文章于 2024-05-06 18:14:57 发布
最新推荐文章于 2024-05-06 18:14:57 发布
阅读量871 收藏 2
点赞数 2
文章标签： vue vuecli less webpack npm
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wwz123124/article/details/115121148
版权
当遇到Vue CLI项目中less和less-loader的版本不兼容导致的问题时，可以尝试降级到兼容版本。具体操作是在项目根目录下使用npm命令安装less@3.9.0和less-loader@4.1.0-s，这通常能解决由于版本不匹配带来的编译错误。其他依赖的兼容问题也可参照此方法，通过调整版本来确保所有组件的和谐共存。
摘要由CSDN通过智能技术生成

问题原因：less和less-loader的版本兼容问题

解决办法：换个版本，由于vue-cli内部的webpack默认配置支持less，所以只需要下载版本兼容的less和less即可：

在项目根目录启动cmd，用npm命令下载：

npm i less@3.9.0 less-loader@4.1.0 -s

其他依赖的兼容问题都是类似的解决办法

ISAWIT
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
vue CLI脚手架中vue文件添加样式后，less-loader版本过高导致编译失败问题解决
cylemon的博客
05-19 1497
1.起因 在vue CLI脚手架中，添加了这么一段样式代码，结果编译失败 2.分析 查阅以及查看失败信息，是less-loader版本过高所致。当前版本是9.0.0，换到6.1.0。 3.解决 卸载当前less-loader以及less(不卸载less的情况下，无法安装指定版本号的less-loader，具体原因不详)。依次执行下述命令。 npm uninstall less-loader npm uninstall less npm install less-loader@6.
vuecli 编译后部署_vue-cli基础配置及webpack配置修改的完整步骤
weixin_29516131的博客
12-30 424
脚手架脚手架帮我们帮我们把 webpack 等相关的配置都处理好，我们只需要基于脚手架快速构建一个项目即可(项目中一定包含webpack的相关配置)vue脚手架 vue-cli我们使用任何东西第一步都是安装1.安装脚手架(一般安装在全局)//=>用npm安装$npm install @vue/cli -g//=>用yarn安装$yarn global add @vue/cli安装成功...
反复重装less+less-loader 但vue ui反复报错找不到 TypeError: this.getOptions is not a function
weixin_45858621的博客
02-23 399
Syntax Error: TypeError: this.getOptions is not a function 我的原因：直接通过vue ui中下载的less和less-loader版本太高，不兼容getOptions函数方法，所以需要对 less、less-loader进行降级处理 然后就降级 发现这俩还有安装顺序要求 解决： step1: cnpm uninstall less step2: cnpm uninstall less-loader step3: ...
vue 在 main.js 引入less 文件报错解决
web_wq
03-18 1468
1. 2.加入javascriptEnabled: true // <- enable this option
Vue-cli 通过ui可视化界面安装less和less-loader后，编译less文件依然失败 解决方法
m0_60336681的博客
08-02 367
编译失败的原因：less和less-loader的版本兼容问题 解决方法： 在项目根目录启动cmd，下载安装可兼容的less和less-loader版本 npm i less@3.9.0 less-loader@4.1.0 -s 重启项目，就可以正常编译。
Failed to resolve loader: less-loader
热门推荐
Zero
09-01 1万+
具体的错误信息,如下图所示： 为什么会产生这个问题呢，原因是我在components目录下的index.vue组件中添加了style样式。 <style lang="less"> .index { padding: 0 20px 20px; box-sizing: border-box; h1, .text { text-align: left; } .footer { position: absolu
vue-cli项目安装相关依赖包
近未来
02-07 2864
一、新建vue项目 二、运行项目 不能使用npm run dev来运行项目， 因为在package.json中丢失了dev，强制运行会报错。 此时有两种做法是： 1（不推荐）： npm run buid npm run serve 若通过方法一运行，则每次均使用该命令，并且需要自己安装router等 npm run serve 2安装webpack（一劳永逸) vue init webpa...
使用vue-cli4手把手搭建一个完整的vue(vue+vuex+vue-router+scss+es6+antD+axios)项目
山野里的小菊花
07-24 1590
安装依赖 全局安装vue-cli cnpminstallvue-cli-g 查看是否安装成功 键入vue --version，出现以下版本号，则代表成功 如果使用poweshellr提示无法加载文件 D:\nvm\nodejs\vue.ps1，因为在此系统上禁止运行脚本，请点击我查看解决办法 创建项目 vuecreatevue-test//vue-test为项目名称，不支持驼峰 ? Please pick a preset: default (babel, eslint)...
vue-cli4+vant+rem+sass+vuex+axios封装+webpack搭建移动端项目
最新发布
2401_84152825的博客
05-06 732
现在我们来说说怎么重写vant-ui样式。由于vant-ui的样式我们是在全局引入的，所以你想在某个页面里面覆盖它的样式就不能加scoped，但你又想只覆盖这个页面的vant样式，你就可在它的父级加一个class，用命名空间来解决问题。/* 你的命名空间 *//* vant-ui 元素*/自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
vue-cli3项目完整配置
努力努力再努力w
02-04 863
一、项目目录 二、vue.config.js 需求： 项目打包时，文件后缀增加时间戳（防止服务器缓存） 加载less公共文件 跨域代理 const path = require("path"); const Timestamp = new Date().getTime(); module.exports = { configureWebpack: { output: { // 输出重构 打包编译后的 文件名称 【模块名称.版本号.时间戳】 filename: `[name].${Ti
在vue 中使用 less的教程详解
10-17
主要介绍了在vue 中使用 less 的相关知识，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
vue-cli3配置less全局，无需一个个文件引入
qq_28353055的博客
11-28 699
主要应用到style-resources-loader // 安装依赖 npm i style-resources-loader -dev 然后再添加 vue add style-resources-loader 安装过程中会让你选择选用哪项，这边选择less 然后在 vue.config.js中会自动生成一个配置 pluginOptions，配置一下自己的路径 module.export...
vue、electron-vue项目 less 无法编译问题
weixin_39729729的博客
11-28 471
less、less-loader 版本不匹配 // 卸载less和less-loader npm uninstall less less-loade // 安装以下版本 npm i less@2.7.2 less-loader@5.0.0 --save-d
关于vue项目中添加less，less-loader不能运行的问题
inticaler的博客
01-06 1258
在vue项目中，我们通常会在style样式中引用less，这样我们就需要下载less和less-loader依赖包， 运行命令 npm install less less-loader --save npm install less less-loader --save 安装完成之后再运行 npm run dev ,发现，项目卡住，运行不起来了，也不报错。 查看less-loader的版本发现，可能是因为less-loader的版本太高了，再重新安装一下。 卸载最高版本的less-loader
less安装_手动配置Webpack之添加less-sass-loader
weixin_39879881的博客
11-30 1285
今天小编就和同学一起来学习一下如何在vue文件里面能够使用less,scss的css预处理解析器，本篇的代码是基于手动配置Webpack之添加webpack-dev-server的基础上来进行修改的。直接在vue文件里面使用less语法先看看package.json文件vue使用less { "name": "vue-webpack", "version": "1.0.0", "descri...
【前端学习】webpack编译Less遇到的问题
Dog Sun的博客
03-08 415
所需模块 npm install less -g npm install style-loader css-loader less-loader less 但打包的时候总显示 The ‘mode’ option has not been set, webpack will fallback to ‘production’ for this value. Set ‘mode’ option to ‘...
绝大多数浏览器滚动条样式兼容性写法
J1ong的博客
12-02 1083
* { scrollbar-color: #ffffff rgba(0,0,0,0.4); /* 滑块颜色 滚动条背景颜色 */ scrollbar-width: thin; /* 滚动条宽度有三种：thin、auto、none */ } /*滚动条样式*/ *::-webkit-scrollbar{ width: 8px; } *::-webkit-scrollbar-thumb{ border-radius: 5px; height: 50px; background-colo
Vue ui安装less依赖报错
Funchovy
09-04 398
TypeError: this.getOptions is not a function at Object.lessLoade **问题原因：**webpack和less-loader版本兼容问题导致的 **解决办法：**将现有的less和less-loader卸载，重新在Terminal中安装指定版本的less和less-loader npm install less@3.9.0 less-loader@5.0.0 -s 停止sever任务后重启sever即可 ...
vue项目中安装less
xm1037782843的博客
03-08 3429
1:less 安装webpack配置 npm install less --save npm install style-loader css-loader less-loader --save webpack..base.config.js module: { rules: [ { test: /\.less$/, use: ['style-loader'...
Vue 2.0：利用vue-cli和element-ui构建树形表格组件
本文档详细介绍了如何使用Vue 2.0结合vue-cli和element-ui构建一个树形treeTable组件。首先，我们概述了整个开发过程中的关键技术和工具： 1. **vue-cli的安装与使用**: vue-cli是一个流行的前端脚手架工具，用于...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ISAWIT

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值