在webstorm 2020.3 中配置less

在webstorm中配置less

打开webstorm的file, file->settings->Tools->file watchers
在弹窗的窗口的右上角点击绿色的 ‘+’ 号,然后选择less,按照下图进行配置:
在webstorm 2020.3 中配置less_第1张图片

在webstorm 2020.3 中配置less_第2张图片
在webstorm 2020.3 中配置less_第3张图片

在webstorm 2020.3 中配置less_第4张图片

Arguments这里需要注意一下,如果填入了 –clean-css ,那生成的 .css 文件的代码就是压缩过的
在webstorm 2020.3 中配置less_第5张图片
点击OK即可。

压缩后的代码格式如下图,一般都不加这个,看个人喜好吧
在webstorm 2020.3 中配置less_第6张图片
不加 –clean-css 的设置如下图:

在webstorm 2020.3 中配置less_第7张图片

不压缩的代码格式如下图,看起来就比较美观,也方便对照less代码是不是写对了。
在webstorm 2020.3 中配置less_第8张图片

在webstorm 2020.3 中配置less_第9张图片
点击Apply,再点击OK。

建立一个less文件,可以看到会自动生成 .css 文件了。
在这里插入图片描述

你可能感兴趣的:(Webstrom,css3,less,前端,webstorm)