WebStorm自动编译less
来源:互联网 发布:怎么退出windows media 编辑:程序博客网 时间:2024/05/19 15:42
WebStorm自动编译less
1. 安装node.js和npm
windows下安装node.js去Node.js官网下载安装包,手动安装。安装node.js的同时会自动安装npm。
安装程序会自动配置环境变量,所以如果要验证node.js和npm是否安装成功,只需要在cmd命令行下输入node -v npm -v即可。
提示以上字样时,node.js和npm已安装成功。
2.使用node来安装less
进入你想安装的目录,输入命令:npm install less即可。less就安装到了 当前路径\node_modules这里。
下图为在WebStorm的终端的输入。
3.配置webStrom的less设置
打开webstorm的file->settings ->External Tools,点击左上角的“加号”标志add,进入对话框
点击“+”,如图填写“Name”和“Group”,在“Tool settings”里面有三个地方需要填写。
Program:填写node.exe的路径
Parameters:是less的安装目录,这里填上 …..\node_modules\less\bin\lessc 再加上
Working directory:nodejs的安装目录
4.配置webStrom的FileWatcher
Program:填上 …..\node_modules.bin\lessc.cmd
Arguments:填上$FileName$
, 指×××.less,被编译的less文件
Working directory : 填上$FileDir$
,指D:\WebstormProjects\useCropper\css,是less文件存放的路径
Output paths to refresh : 填上$FileDir$\$FileNameWithoutExtension$.css
,指D:\WebstormProjects\useCropper\css\×××.css,是less文件存放的路径\×××.css
点击右侧的Insert macros,可以查看各种Macros的含义,选择在Arguments、Working directory、Output paths to refresh中填上自己所需要的,如下图所示:
4.编译less
完成以上4步操作后webStrom将会自动将.less文件编译成.css文件。新建.less文件后,会发现下面自动出现编译好的同名.css文件。.less文件修改后,.css文件也会自动修改。
- WebStorm自动编译less
- less,webstorm 自动编译输出css配置
- less-webstorm 编译配置
- 关于webStorm设置less自动编译css和sourcemap问题
- webstorm自动编译typescript
- Hbuilder less自动编译
- webstorm设置sass自动编译
- webstoem自动编译less文件
- HBuilder配置自动编译Less
- WebStorm 8.0安装LESS编译环境的教程
- webstorm下搭建编译less环境 以及设置压缩css
- webstorm入门5-sass、scss、less监听编译
- HBuilder配置自动编译Less(包含less-plugin-functions)
- WebStorm使用less
- webstorm less Filewatcher
- Webstorm 安装less
- Webstorm安装Less
- webstorm scss 自动编译添加css3前缀
- Android 通用网络框架封装
- Java环境搭建:JDK 、eclipse和Maven
- [JAVA][Eclipse]JVM terminated. Exit code=13
- springmvc与struts2的区别
- leetcode Algorithms 4 Median of Two Sorted Arrays
- WebStorm自动编译less
- 怎样将结构完全一样的两个表的内容合并到一个表中,SQL语句
- 如何解决latex中图表在明明页面还有空白部分的情况下自动调整到最后一页的问题
- 远程部署应用程序:一台服务器运行两个tomcat
- Tomcat 配置成Windows服务
- 操作系统刷题(二十)
- Unity Shader之uv旋转
- Android Studio安装完成之后,不能运行的解决办法
- Bootstrap树形菜单,就这么简单