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

一、下载安装Easy LESS

  1. 首先利用vscode的插件功能搜索并下载安装Easy LESS
    vscode:如何在保存less文件时,自动生成对应的css文件,并指定css文件的保存路径_第1张图片

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

二、指定css文件保存路径

  1. 点击设置——》扩展设置vscode:如何在保存less文件时,自动生成对应的css文件,并指定css文件的保存路径_第2张图片
  2. 点击在setting.json中编辑vscode:如何在保存less文件时,自动生成对应的css文件,并指定css文件的保存路径_第3张图片在这里插入图片描述

方法有两种

两种方法都是修改如下部分vscode:如何在保存less文件时,自动生成对应的css文件,并指定css文件的保存路径_第4张图片

(一):相对路径法

如下我设置的路径可以理解为,less文件的上两层的目录下创建一个css文件夹,然后把less文件生成的css文件存在css这个文件夹中。
vscode:如何在保存less文件时,自动生成对应的css文件,并指定css文件的保存路径_第5张图片

如上设置,保存style.less文件后,会生成的文件目录结构如下所示,其中style.css为style.less生成的对应css文件vscode:如何在保存less文件时,自动生成对应的css文件,并指定css文件的保存路径_第6张图片

(二):绝对路径法

${workspaceRoot}代表根目录
下图表示设置的文件保存路径为:根目录\exercise文件夹\css文件夹下vscode:如何在保存less文件时,自动生成对应的css文件,并指定css文件的保存路径_第7张图片
生成的文件目录结构:
vscode:如何在保存less文件时,自动生成对应的css文件,并指定css文件的保存路径_第8张图片

你可能感兴趣的:(less)