在vscode中如何使用less编程

在vscode中如何使用less编程_第1张图片
第一步:在扩展:商店里搜 less,选择安装Ease LESS,安装成功注意重启一下vscode.
在vscode中如何使用less编程_第2张图片
第二步:快捷键command+逗号打开用户设置,搜less.complie,点击编辑添加到右边,设置commpress是否开启压缩,sourceMap是否生成.map文件。

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

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

在vscode中如何使用less编程_第3张图片
没有.map文件时,在浏览器中调试时显示的是css文件,不方便在less中修改。


在vscode中如何使用less编程_第4张图片
有.map文件时,在浏览器中调试时显示的是less文件,能准确定位到行数,方便在less中修改。

你可能感兴趣的:(在vscode中如何使用less编程)