博客

vscode：如何在保存less文件时，自动生成对应的css文件，并指定css文件的保存路径

  • Post author:
  • Post category:其他




一、下载安装Easy LESS

  1. 首先利用vscode的插件功能搜索并下载安装Easy LESS

    在这里插入图片描述

  2. 点击Install，安装自动生成css文件的插件Easy LESS



二、指定css文件保存路径

  1. 点击设置——》扩展设置
    在这里插入图片描述
  2. 点击在setting.json中编辑
    在这里插入图片描述
    在这里插入图片描述




方法有两种

：

两种方法都是修改如下部分
在这里插入图片描述



（一）：相对路径法

如下我设置的路径可以理解为，less文件的上两层的目录下创建一个css文件夹，然后把less文件生成的css文件存在css这个文件夹中。

在这里插入图片描述

如上设置，保存style.less文件后，会生成的文件目录结构如下所示，其中style.css为style.less生成的对应css文件
在这里插入图片描述



（二）：绝对路径法


${workspaceRoot}代表根目录


下图表示设置的文件保存路径为：根目录\exercise文件夹\css文件夹下
在这里插入图片描述

生成的文件目录结构：

在这里插入图片描述


版权声明：本文为haotian1997原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。