Webstorm2017中安装Less编译插件
来源:互联网 发布:淘宝网登陆页面 编辑:程序博客网 时间:2024/06/08 16:52
“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文件
- Webstorm2017中安装Less编译插件
- Webstorm2017,SVN插件安装
- IDEA编译less插件LESS CSS Compiler的安装
- eclipse安装less插件
- gulp安装&less插件
- gulp安装&less插件
- IDEA配置less编译插件
- gulp安装&less插件教程
- gulp的安装&less插件
- Less简易安装与编译
- sublime text 3 怎样安装及使用less插件,并且能够自动编译css文件
- 【NotePad++】使用NppExec插件编译less文件
- 在sublime中安装sass编译插件
- 在sublime中安装sass编译插件
- vue中使用less编译css
- ubuntu14.04下安装webstorm2017.2
- 开发工具WebStorm2017的安装与破解
- 笔记:gulp的安装以及less插件安装与使用
- DNS解析过程及DNS优化
- 玩转git分支
- HTTP长连接和短连接以及推送技术原理
- Android 中的属性动画 --- 2(插值器)
- [李景山php] html css JavaScript jquery试题库
- Webstorm2017中安装Less编译插件
- 协方差的含义
- .NET PPT控件 Spire.Presentation for .NET v2.8发布 | 附下载
- jstat用法
- zoj-1203-kruskal-C++
- Mac /etc目录下文件示例
- 5.5日学习日志
- 你会淹没在数据湖中吗?
- MYSQL IF 和 IFNULL 函数 IF(expr1,expr2,expr3) IFNULL(expr1,expr2)