在WebStorm里配置watcher实现编辑less文件时自动生成.map和压缩后的.css文件

1.操作前确定成功安装less，检测方法，在命令行（cmd）,输入lessc -v，看到如下类似内容，则说明安装过了。

如果需要生成压缩后的css的文件，则需要通过以下命令安装插件

npm install less-plugin-clean-css

【注：】可能遇到的问题

解决方案：在E:\Program Files\nodejs\node_modules\npm进行安装

2.打开WebStrom，随便新建一个工程，在工程名上右键，【新建】-【Stylesheet】,输入文件名，Kind值选择Less File,【确定】，会自动提示是否将less加入watcher，点击【Add watcher】

打开New Watcher配置界面，如果没有提示，也可以通过【文件(File)】-【设置(Settings)】-【工具(Tools)】-【File Watchers】-【+】-【Less】打开New Watcher配置界面。

3.此时，如果直接点击【确定】，则当我们修改less文件时，会自动生成相应的css文件，当然我们为了让其功能更强大，生成压缩后的css和相应的map文件，就需要修改

Arguments和Output paths to refresh两个参数（注意Program值是自动获取的，每个人电脑环境不同，路径类似）。按照下面的表中值进行配置，完成相应的功能。
修改前

参数名	参数值(下面no之前是两个“-”)
Arguments	–no-color $FileName$
Output paths to refresh	$FileNameWithoutExtension$.css

修改后（不启用css压缩）

参数名	参数值(下面no和source之前是两个“-”)
Arguments	–no-color $FileName$ $FileNameWithoutExtension$.css –source-map=$FileNameWithoutExtension$.css.map
Output paths to refresh	留空

修改后（启用css压缩，需要给less安装插件less-plugin-clean-css，详见《安装Nodejs、npm、Less（支持生成压缩后的css）》）

参数名	参数值(下面no、clean和source之前是两个“-”)
Arguments	–no-color $FileName$ $FileNameWithoutExtension$.min.css –clean-css –source-map=$FileNameWithoutExtension$.min.css.map
Output paths to refresh	留空

修改后点击【确定】保存，回到less文件编辑界面，随意输入css代码，立即会生成css和map文件。

Arguments里还可添加其他参数实现更多的功能，点击后面的【Insert maro…】可以添加更多的宏值

在WebStorm里配置watcher实现编辑less文件时自动生成.map和压缩后的.css文件相关推荐

安装Ruby、Sass在WebStrom添加Watcher实现编辑scss文件时自动生成.map和压缩后的.css文件...
前言这段时间一直在看Bootstrap,V3官方直接提供了Less版本的源码,就先将Less学完了,很简单的语法,学习写Demo都是在Webstorm里写的,配置了Watcher自动编译(详见< ...
在WebStorm里配置watcher实现编辑less文件时自动生成.css文件
一.webstrom自动生成css文件 1.安装 nodejs //查看nodejs版本 node -v //查看npm版本 npm -v //全局安装less npm install ...
配置eclipse，创建类/方法时自动生成作者、创建日期、方法功能等注释
1.创建新类时自动创建注释: pattern中insert Variable:插入自己想创建的自动注释. eg: /*** @Title:TestNodes.java* @Description:TO ...
如何配置log4j每天产生日志，并且当天日志大于10M时自动生成另一个文件
http://bbs.csdn.net/topics/390635339?page=1 如何配置log4j每天产生日志,并且当天日志大于10M时自动生成另一个文件假设 11-11日生成comlib ...
excel平均值公式_推荐一款多人同时编辑Excel表，自动生成汇总报表的软件给大家...
企业管理人员经常遇到这种情况,就是需要大家填报Excel表格的数据,便于统一汇总数据报表. 推荐的这个免费软件叫优企Excel系统,可以非常轻松的做到多人同时在表格中填报数据,和Excel的操作一样, ...
在Webstorm中配置Compass Watcher
2019独角兽企业重金招聘Python工程师标准>>> 结合Webstorm和Compass,完成自动编译Scss文件为css,做个简单的记录. 1 首先用 webstorm 打开创 ...
在webstorm中配置sass的自动编译，并且可以指定编译后的css的目录.
参考: WebStorm-2018.2-Help-Sass, Less, and SCSS 作者:tobyDing 链接:https://www.jianshu.com/p/0fe52f149cab ...
WebStorm+Vue-cli 配置alias 点击跳转无效问题
尝试方法查看vue-cli版本,不同版本配置文件不同使用vue inspect检查,搜索alias查看路径映射使用console.log打印日志,确保vue.config.js正确加载运行可以 ...
java里引用css没反应,解决HTML外部引用CSS文件不生效问题
作为一个前端小白,鼓捣了几天前端..今天突然发现我深信不疑的东西,竟然出现了问题..就比如我在css目录下面写了一个css样式文档:style.css.这时里面只有一句话: body { backgr ...

在WebStorm里配置watcher实现编辑less文件时自动生成.map和压缩后的.css文件

在WebStorm里配置watcher实现编辑less文件时自动生成.map和压缩后的.css文件相关推荐

最新文章

热门文章