vue插件-less、less-loader样式管理

合集 - Vue2(8)

1.vue插件-less、less-loader样式管理2024-10-10

2.vue尚品汇商城项目-day00【项目介绍：此项目是基于vue2的前台电商项目和后台管理系统】2024-10-103.vue2进阶篇：vue-router之命名路由2024-10-124.vue2进阶篇：vue-router之router-link的replace属性2024-10-125.vue2进阶篇：vue-router之编程式路由导航2024-10-126.vue2进阶篇：vue-router之命名路由2024-10-137.vue表单案例练习：vue表单创建一行数据及删除数据的实现与理解2024-10-298.vue2基础组件通信案例练习：把案例Todo-list改写成本地缓存2024-10-29

收起

说明：有的项目采用的是less样式，浏览器不识别less样式，需要通过less、less-loader【安装5版本的】对less进行处理，把less样式变为css样式，浏览器才可以识别。另外引入的版本不宜过高，否则也会出现莫名奇妙的错误。

安装命令如下：

cnpm install --save less less-loader@5
或者
npm install --save less less-loader@5

注意点3：如果想让组件识别less样式，需要在style标签的身上加上lang=less

报错场景

错误场景1：cnpm不是内外部命令

原因：那就说明不认识命令cnpm，可以采用npm命令进行安装；另外有些人在IDEA中的Terminal终端窗口进行命令安装也显示失败，那么请用管理员权限打开CMD黑色窗口，进行命令安装。

安装cnpm命令：
npm install cnpm -g --registry=https://registry.npm.taobao.org

错误场景2：已经安装less、less-loader的前提下，引入的css样式还是爆红，比如如图

原因：如果想让组件识别less样式，需要在style标签的身上加上lang=less