关于less与less-loader版本之间的问题以及改变下载安装好之后出现的飘红的解决方法

最新推荐文章于 2024-08-22 08:34:06 发布
最新推荐文章于 2024-08-22 08:34:06 发布
阅读量5.4k 收藏 14
点赞数 8
文章标签： less vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43510862/article/details/122367315
版权

关于less与less-loader版本之间的问题以及改变下载安装好之后出现的飘红的解决方法

less和less-loader版本问题

在正常搭建的vue脚手架中如果要用到less则需要引入，因为浏览器不能识别less代码，而通过这一操作可以将less转换为浏览器能识别的css代码。

首先检查package.json中的dependencies中是否已经引入了less和less-loader依赖，例如我就是已经引入完了正确的版本，如果你是已经安装过高的版本并报错了，先将less和less-loader卸载。

 npm uninstall less less-loader

接下来可以进行安装less 和 less-loader的操作了
我使用了淘宝镜像下载

cnpm install --save less@3.11.1 less-loader@5

在这里插入图片描述
然后回到package.json中看到这两个依赖出现了就证明安装好了(ps:版本过高会报错而且less和less-loader之间版本还有一定的联系)

我下载安装都按照步骤来了，还是飘红了

首先检查你的style里面是否写了lang="less"这一步很关键，因为如果你不写vue会自动将这个识别为css代码，如果这一步改完了就不飘红了那么恭喜你，可以继续完成你的项目了。

*！！！*如果你加了之后还是没有解决这个时候，你的编译是没问题的，也可以运行，只不过他提示你错误的原因是代码不匹配，此时我们通过>>文件>>首选项>>设置>>输入setting>>进入settings.json中>>找到files.associations将其的值从html改为"vue"就完美解决了，(ps:还没出现副作用，如果出现副作用我会回来及时更新)
在这里插入图片描述

欢迎大佬指导！！

引自：https://www.jianshu.com/p/6149eb60a01f

weixin_43510862
关注
关于less-loader安装失败问题
海阔天空
09-20 726
1223
webpack最常用的loader：style-loader、css-loader、less-loader、postcss-loader、babel-loader等
m0_60622481的博客
10-26 2653
webpack最常用的loader：style-loader、css-loader、less-loader、postcss-loader、babel-loader等
less和less-loader自己用的对应关系
lyclyc_的博客
05-30 2019
【代码】less和less-loader自己用的对应关系。
Vue踩坑，less与less-loader安装，版本不一致
cxr的博客
05-05 1173
1) npm uninstall less与 npm uninstall less-loader。3) OK，启动vue项目。
less-loader 使用指南
最新发布
gitblog_01049的博客
08-22 329
less-loader 使用指南 less-loaderCompiles Less to CSS项目地址:https://gitcode.com/gh_mirrors/le/less-loader 项目介绍 less-loader 是一个用于 Webpack 的加载器，它允许你在 JavaScript 模块中使用 Less 语言。Less 是一种 CSS 预处理器，它扩展了 CSS 的功能，引...
less和less-loader版本搭配
Father_Of_Soft的博客
03-02 3887
less为4版本时，less-loader为5~7没有问题，我安装的是7版本。
JavaScript中的对象，入职3个月的前端程序员面临转正，四轮面试后多久出结果
2201_75604580的博客
04-14 589
如果你已经下定决心要转行做编程行业，在最开始的时候就要对自己的学习有一个基本的规划，还要对这个行业的技术需求有一个基本的了解。有一个已就业为目的的学习目标，然后为之努力，坚持到底。如果你有幸看到这篇文章，希望对你有所帮助，祝你转行成功。网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。需要这份系统化的资料的朋友，可以添加V获取：vip1024c （备注前端）一个人可以走的很快，但一群人才能走的更远！
记录一下less和less-loader版本问题
weixin_44406482的博客
05-02 2247
1，检查package.json中的dependencies中是否已经引入了less和less-loader依赖， 2，先将less和less-loader卸载再重新安装。 卸载：npm uninstall less less-loader 安装less 和 less-loader：cnpm install --save less@3.11.1 less-loader@5 ...
Webpack中css-loader和less-loader的使用教程
12-03
如果你的项目使用了Less作为CSS预处理器，需要安装`less-loader`和`less`本身： ```bash npm install less less-loader --save-dev ``` 然后更新`webpack.config.js`中的配置： ```javascript module.exports = {...
前端开源库-less-modify-var-loader
08-30
你需要在`module.rules`数组中添加一条规则，指定匹配的文件类型（通常是.less文件）以及less-modify-var-loader的选项： ```javascript module.exports = { // ... module: { rules: [ { test: /\.less$/, ...
【解决 vue中less和less-loader版本】Syntax Error: TypeError: this.getOptions is not a function
丑小鸭
01-07 1482
此问题是less-loader和less的版本不对照的问题。一般是less-loader版本过高， 可以降低less-loader版本，既可解决。 解决方案 1 只卸载 less-loader 1 卸载安装过的 less-loader 在终端输入： npm uninstall -g less-loader 2 安装对应低版本的 less-loader npm install --save-dev less-loader@4.1.0 3 终端输入 npm install 进行更新相关库 4 重新开启项目
webpack-less-loader
08-26
webpack入门和实战(二)：全面理解和运用loader和plugins,理解less-loader加载器的使用
在项目中安装、使用less-loader、less用于处理less格式文件
qq_46112274的博客
02-15 8087
在项目中安装、使用less-loader、less用于处理less格式文件1、安装配置2、配置3、案例：使用less-loader和less 在项目中安装less-loader，用于加载less文件 webpack中文网安装less-loader参考 1、安装配置 版本号与项目中webpack版本要对应，不然安装不成功 如果安装过程中，出错先使用以下命令： 出错参考 npm i --legacy-peer-deps 使用命令安装less-loader和less: npm install --save-de
vue插件-less、less-loader样式管理
刘大猫
03-31 871
vue插件-less、less-loader样式管理
使用vue搭建项目，因为less 与 less-loader版本不匹配，无法编译的解决办法!
TO_NARUTO的博客
08-13 5847
前言： 今天通过跟随b站vue实战电商后台管理系统学习搭建项目时，进行到下载依赖less 和 less-loader来编译 less 预处理样式，检查没有其他报错，但总是无法编译。因为我刚开始是通过vue ui界面下载的版本，两个依赖版本如下： 后来查找相关资料，猜测可能是版本不匹配问题，因为有类似sass的报错参考： stackflow关于sass版本不匹配的解决办法 然后按照参考信息，成功解决了！ 报错信息： error in ./src/components/login.v...
less less-loader
weixin_42579969的博客
01-19 386
less 是一种 CSS 预处理器，它允许使用变量、函数、嵌套等高级功能来编写 CSS 代码。less-loader 是 Webpack 的一个模块加载器，用于在 Webpack 中使用 less。它可以将 less 文件转换为 CSS 代码并加载到页面中。 ...
项目中安装 less 和 less-loader 命令
热门推荐
Kuroko's Development Notes
01-03 6万+
npm命令如下： npm install less less-loader --save-dev 或者 yarn命令如下： yarn add less less-loader --dev 建议安装在本地依赖，没必要装全局环境，安装成功后 package.json 如下：   要安装全局的话，直接参考less官网：  ...
less
小小程序猿洋的博客
05-04 425
在Vue中使用 1安装less依赖npm install less less-loader --save 2 修改webpage.base.config.js文件 { test: /\.less$/, loader: 'style-loader!css-loader!less-loader' }, 3既可以使用使用其他的less文件 在style中@import './i...
解决vue引入less和lessloader后的报错问题.原因是less和lessloader的对应关系(根据使用后续补充),解决办法降级lessloader
qq_42292211的博客
09-07 2851
目前已知按如下命令安装的是less的4.1.1版本 yarn add less 按照下面命令安装的less-loader为10.0+的版本,会造成webpack报错,经过查阅发现是版本不匹配的问题,降级less-loader的版本即可 yarn add less-loader -D //安装为dev依赖 首先移出已安装的版本 yarn remove less-loader 然后安装特定版本的less-loader,我用的是7.x的版本, yarn add less-loader@7
vscode配置ts项目下载不了less less-loader css-loader style-loader
08-28
对于在VS Code中配置TypeScript项目下载less、less-loader、css-loader和style-loader这些包的问题，您可以按照以下步骤进行操作： 1. 打开终端或命令行界面，进入您的项目根目录。 2. 确保已安装Node.js和npm。您...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值