less的基本使用

1.html使用less

　　1.使用npm安装less：npm install -g less

　　2.在vscode中，可以安装插件：Easy Less

　　　　

　　3.新建一个less后缀的文件，当在此文件编写代码时会自动生成对应的css文件代码，新建html文件有两种引用方法

• 直接用link引用对应的css文

　　　　　　

• • 引用less文件，需要两行代码:　

<link rel="stylesheet/less" type="text/css" href="index.less" />
<script src="https://cdn.jsdelivr.net/npm/less@4"></script>

　　　　　　

 

 

2.vue3使用less

　　1.安装less：npm i less-loader less --save-dev，可以看到package.json有对应less依赖

　　　　

　　2.组件的style标签上，添加lang=“less”，后续直接写less代码即可