在vscode中如何使用less编程

Posted 2021-02-21 jianxian

参考一：

　　

 

第一步：在扩展：商店里搜 less,选择安装Ease LESS，安装成功注意重启一下vscode.

 

第二步：快捷键command+逗号打开用户设置，搜less.complie,点击编辑添加到右边，设置commpress是否开启压缩，sourceMap是否生成.map文件。

到此已经配置成功，在文件中新建less文件编程，保存时就会自动在同目录下生成.css文件和.css.map文件。如果是开发小程序可以设置"outExt":".wxss",输出的文件就是.wxss和.wxss.map文件。

其中.css.map文件是用来确保css代码和less中代码对应关系。是为了方便针对性的进行修改了。具体介绍看下图：

 

没有.map文件时，在浏览器中调试时显示的是css文件，不方便在less中修改。

 

 

有.map文件时，在浏览器中调试时显示的是less文件，能准确定位到行数，方便在less中修改。

参考2：

第一，在扩展包搜索 less ,找到 easy less

 

第二，安装完记得重启

第三，ctrl+,   快捷键打开设置，也可以在   文件 > 首选项 > 设置

第四，搜   less.complie   ，点击less,拉倒最底下，找到   setting.json

 

第五，在json配置中加入，less.compile(less配置)

"less.compile": {
"compress": false,//是否压缩
"sourceMap": false,//是否生成map文件，有了这个可以在调试台看到less行数
"out": true, // 是否输出css文件，false为不输出
"outExt": ".css", // 输出文件的后缀,小程序可以写‘wxss‘
}

 

好了，到此大功告成
————————————————
版权声明：本文为CSDN博主「浩星」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_41619796/java/article/details/88711215