如何在vscode中配置less，并自定义css文件输出目录(超全面超详细)

目录

1，安装easy less扩展。

2、安装后–>点击“管理”–>“扩展设置”，点击easy less扩展右下角小齿轮（设置）

3、选择“在setting.json中编辑”

4、拉到底加入以下代码，生成css文件的目录根据需要更改，这里以css目录举例

5、然后重启vscode

6、在工作区项目文件中创建.less文件，并创建一个css文件夹（目录）

 7、然后在.less写样式代码，保存，就会在css文件下自动生成一个对应的同名的.css文件，就可以在html中引入使用啦！

 8， 如果想把.less文件和生成的.css文件放在一个目录中，那就改一下配置中输出目录 “out”的值改为 true就行了

---

1，安装easy less扩展。

在vscode中安装easy less

 

2、安装后–>点击“管理”–>“扩展设置”，点击easy less扩展右下角小齿轮（设置）

3、选择“在setting.json中编辑”

4、拉到底加入以下代码，生成css文件的目录根据需要更改，这里以css目录举例

/**<<<<下面是less配置**/
    "less.compile": {
        "compress": true, // 是否删除多余空白字符
        "sourceMap": false, // 是否创建文件目录树，true的话会自动生成一个 .css.map 文件
        "out": "${workspaceRoot}\\css\\", // 输出文件目录 这里为css文件夹
        "outExt": ".css", // 输出文件的后缀,默认为.css 如果是微信小程序后缀为.wxss
    }
    /**上面是less配置>>>>**/

注意：第三行代码输出文件目录， 这里是双斜杆 

5、然后重启vscode

6、在工作区项目文件中创建.less文件，并创建一个css文件夹（目录）

 7、然后在.less写样式代码，保存，就会在css文件下自动生成一个对应的同名的.css文件，就可以在html中引入使用啦！

 

 8， 如果想把.less文件和生成的.css文件放在一个目录中，那就改一下配置中输出目录 “out”的值改为 true就行了

        这里以css目录为例

（1）把.less文件放在css文件夹中

（2）设置配置中的  out 值为  true 

                注意：这里不是字符串“true”，而是true

（3）.less文件保存后的效果

 喜欢的朋友给个赞吧!