关注

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

一、自动生成css文件

1、打开VSCODE,点击左侧栏目的【扩展】,在搜索框搜索【Easy LESS】,点击【安装】,如下图所示(ps:我已经安装过了):

2、安装成功之后,新版本的VSCODE应该不用重启,就可以生效,如果没有生效,重启一下。

在less文件夹里边的index.less文件,引入另外一个base.less文件,然后ctrl+s保存,此时在less文件夹下会多出现一个index.css文件,效果如下图所示,:

二、指定生成的css文件的路径

1、打开VSCODE【扩展】,在搜索框搜索【Easy LESS】,然后点击右下角的【齿轮】按钮,在弹出框中选择【设置】,如下图所示:

2、在新的窗口中,点击【在settings.json中编辑】,如下图所示:

3、在settings.json这个文件中,找到less.compile属性,加入"out": "../css/", 并且保存,注意css文件的位置,如下图所示:

4、此时,再回到index.less中,点击保存,可以看到,index.css文件被保存到css路径下了,如下图所示:

5、删除掉less文件夹里的index.css文件,如下图所示:

转载自CSDN-专业IT技术社区

原文链接:https://blog.csdn.net/weixin_44135998/article/details/152082679

评论

赞0

评论列表

微信小程序
QQ小程序

关于作者

点赞数:0
关注数:0
粉丝:0
文章:0
关注标签:0
加入于:--