vue-cli脚手架: less-loader插件的安装配置

升级npm及配置Less处理：从3.8.6到6.0.0 loader详解
最新推荐文章于 2024-06-03 09:03:57 发布
原创 最新推荐文章于 2024-06-03 09:03:57 发布 · 7.1k 阅读 · 14 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文指导如何将npm版本降为3.8.6，并详细介绍了如何配置less-loader处理less文件，包括安装less、less-loader及其版本选择，以及解决可能遇到的问题。

一、降低npm版本

npm install npm@3.8.6 -g 

二、loader - 配置处理 less 文件中的 loader

1、安装 less

npm install less --save-dev

2、安装 less-loader（ 这里需要指定版本，不能太高，如果太高后续容易报错。后面解答报错问题 ）

npm install less-loader@6.0.0 --save-dev

3、安装依赖

 npm install less less-loader --save-dev

vue-cli3使用less
skysys的研究小屋
02-17 1468
vue脚手架3出来有一段时间了，相比之前2,cli3文件更为简洁了许多，关于webpack的配置文件config,build已经被删除，若是需要进行配置需要自己手动建立一个vue.config.js，在里面可以进行配置，具体参数详见官网：https://cli.vuejs.org/zh/config/#vue-config-js 这里着重讲一下vue-cli3如何使用less进行开发，cli3使用less更为简单些，只需安装less依赖包即可： npm安装： npm i less@2.7.3 less-lo
vue-cli脚手架项目构建以及按需引入antd
weixin_47783830的博客
10-25 1420
安装vue-cli npm install vue/cli -g 查看vue版本 注意：V要大写 vue -V 如果下载速度太慢，可以使用cnpm淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org 此时下载出来的应该是2.9.6版本的脚手架 vue项目创建分为两种 vue-cli2 vue init webpack name vue-cli3 vue create name 一.CLI.
webpack-less-loader
08-26
webpack入门和实战(二)：全面理解和运用loader和plugins,理解less-loader加载器的使用
Vue CLI 安装使用 less 和 less-loader
继续学习......
02-11 448
less 基础
vue-cli添加less-loader
weixin_33991418的博客
07-20 1576
vue-cli默认使用的css-loader，多数情况下我们会添加一种预编译语言 下面简单介绍一下添加less-loader 安装vue-cli 移步官网https://cn.vuejs.org/v2/guide... 安装less和less-loader 这里需要安装less和less-loader cnpm i less --save...
vue2+less开发，使用vux-loader，配置全局less变量
泠泠似水
05-03 8869
使用less作为样式工具，如果引入全局样式，那么例如： 引入 reset.less，默认样式不包含reset，并且部分用户自己有一套reset样式，因此需要在App.vue进行手动引入 <style lang="less"> @import 'src/styles/reset.less'; </style> 但是使用less的一大优势是使用变量来定义不同的值，然后...
less-loader安装
buterra的博客
04-24 1361
在VScode的终端窗口安装less-loader时出现如下错误主要原因是权限不够右键vscode——>在导航栏选择兼容性一栏，勾选以管理员身份运行此程序，点击应用——>重启VScode即可。
vue-cli设置css不生效的解决方法
01-19
我们有的项目使用的是老的vue-cli脚手架生成的，今天想写点东西，发现.vue文件里面 style 里面写的样式都不生效了，很自然就想到是不是loader的问题。 在这种项目的webpack.base.config.js一般设置loader的 rules: ...
webpack手动配置vue-cli脚手架详细处理
最新发布
panerchao的博客
06-03 268
【代码】webpack手动配置vue-cli脚手架详细处理。
vue-cli脚手架build目录下utils.js工具配置文件详解
10-18
在 Vue CLI 创建的项目中，`build` 目录包含了构建过程所需的配置文件和脚本。`utils.js` 是其中的一个关键配置文件，它包含了处理构建过程中各种任务的辅助函数，如处理 CSS、图片等静态资源。 在 `utils.js` 文件...
Vue项目安装less和less-loader
热门推荐
weixin_52580677的博客
10-24 2万+
less-loader的版本号要搭配webpack的版本号来选择，webpack@4+可以选择的less-loader版本是5~7。完成less的安装后，我们只需要在style节点上加上lang=‘less’，就可以使用less语法了。在vue项目打开终端，进入项目安装（我记得less好像全局安装没用，每个vue项目要单独安装）less目前的最高版本是5+，但保险起见，我们还是安装4+比较好。上一步中，我们已经知道webpack的版本是4+如果没有安装，要先进行安装。打开cmd，通过命令查看。
Vue中less-loader项目依赖配置
Hank_Zheng的博客
04-04 1627
项目场景： Vue项目，vscode编写 问题描述： 在单文件组件“Login.vue”，样式声明中，声明支持“less语法”，如下 但是出现了几个问题： 第一次编译，报错说缺少“less-loader”项目依赖 解决方法：在“Vue图形化界面”中手动安装了三个项目依赖，如图 直接在“Vue图形化界面”中手动安装项目依赖后，第二次编译运行，报错说“某个方法，不是函数”，如图 原因：“less-loader”版本过高 解决方法：卸载“less-loader”项目依赖，手动在终端安装低
vue踩坑----less-loader的安装
weixin_43162630的博客
06-30 4683
VUE踩坑篇 npm install less less-loader --save-dev报错 版本问题，但是温馨提示：如果一直报错，不要总是安装下载，因为电脑会晕！之后换版本，换来换去，报的错更绝望。这时候，恭喜你，重新安装nodejs吧，不会浪费太多时间。 npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree：如图： ps：我只是针对这个less-loader的install会报错，其他的不会，比如我输入
Vue - 安装less-loader
qq_39123467的博客
10-18 3384
Vue - 安装less-loader
在项目中安装、使用less-loader、less用于处理less格式文件
qq_46112274的博客
02-15 8410
在项目中安装、使用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
VUE2项目安装使用安装less、less-loader以及配置
P20190318249的博客
02-24 4118
less安装配置
vue安装less、less-loader
weixin_51357044的博客
05-27 5329
最近安装这个less一直报错，要么是less要么是less-loader，各种百度各种不行，最终我这个方法安装成功了 npm ERR! code ERESOLVE npm ERR! ERESOLVE could not resolve npm ERR! npm ERR! While resolving: @vue/eslint-config-standard@6.1.0 npm ERR! Found: eslint-plugin-vue@8.7.1 npm ERR! node_modules/eslint-
JavaScript中的对象，入职3个月的前端程序员面临转正，四轮面试后多久出结果
2201_75604580的博客
04-14 802
如果你已经下定决心要转行做编程行业，在最开始的时候就要对自己的学习有一个基本的规划，还要对这个行业的技术需求有一个基本的了解。有一个已就业为目的的学习目标，然后为之努力，坚持到底。如果你有幸看到这篇文章，希望对你有所帮助，祝你转行成功。网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。需要这份系统化的资料的朋友，可以添加V获取：vip1024c （备注前端）一个人可以走的很快，但一群人才能走的更远！
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值