“LESS CSS Compiler”JetBrains公司官方提供的插件,主要功能就是监测Less文件目录,当目录中的Less文件修改并保存,该插件会自动将Less文件编译成CSS文件,并复制到相关联的CSS目录去。
1、下载和安装
(1)给出下载地址(https://plugins.jetbrains.com/plugin/7059-less-css-compiler)(图1)。
图1:LESS CSS Compiler的下载页
(2)下载完的安装包名称为“lessc-plugin.zip” (图2)。
图2:下载的安装包
(3) 打开“WebStorm”,按“File >> Settings >> Plugins”进入插件安装界面,通过“Install plugin from disk…”按钮,选择下载的安装包进行安装(图3)。
图3:从磁盘安装插件
(4) 安装完成后,重新启动“WebStorm”(图4)。
图4:重新启动WebStorm
(5) 经过以上几个步骤,“LESS CSS Compiler”插件的下载和安装就完成了。
2、使用简介
(6) 安装成功后,再次进入“WebStorm”,在“File >> Settings >> Other Settings”中就可以看到新增了“LESS Profiles”设置界面(图5)。
图5:进入“LESS Profiles”设置界面
(7) 在图6中点击“绿色+号”可以新增一个Less的配置,先给该配置起个名称,这里我们起名为“helloLess”(图6),然后点击“OK”按钮。
图6:给Less配置起个名称
(8) 进入Less编译插件的设置界面后,选择Less源文件所在路径和编译后CSS文件的存放路径,我这里分别为“D:\HelloWorld\less”和“D:\HelloWorld\css”(图7),读者根据自己的文件位置设定即可,设置完成后点击“OK”按钮保存设置。
图7:插件设置
(9) 在项目中,我们对less目录下的“style.less”文件进行修改并保存(图8标记1),提示CSS编译成功(图8标记2)。
图8:修改并保存less文件
(10) 在“css”目录中,就会生成一个对应的css文件,这里为“styles.css”(图9)。
图9:自动生成对应的css文件