webstoem自动编译less文件
- 去node的主页下载对应版本的nodejs然后安装下载地址:http://nodejs.org/ 根据自己的系统选择合适的版本下载。
- 安装完成之后打开命令提示符(win+r 输入cmd 回车),分别输入node -v以及npm -v如果返回版本号说明你安装成功了
- 接下来就可以安装less了,在“命令提示符”下运行命令“npm install less -g”,然后npm就自动开始下载并安装LESS。
- 配置webstorm(版本10),点击“文件”> "设置"(Ctrl+Alt+S) 弹出设置界面,在左侧导航找到“工具(tool)">"file Watchers" 点击“+”号按钮找到less文件选项点击添加。
- 配置参数
- Arguments : --no-color --source-map=$FileNameWithoutExtension$.css.map $FileName$
- Output paths to refresh : $FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map
- 配置完参数后,写完less代码后,会直接在less文件的目录下生成一个.css文件和一个.css.map文件
- .css.map文件的作用是可以直观的在浏览器调试界面看到的是less文件的第几行
- 因为你是用less写的样式,less会编译成css显示在页面上。
- 但有个麻烦,浏览器里看的都是css第几排,而你编辑的又是less文件,很难对上。
- 这个时候有了source map,浏览器里直接显示less,非常方便。
webstoem自动编译less文件的更多相关文章
- Eclipse不自动编译java文件的终极解决方案
最近我的eclipse经常犯傻,项目中总是有很多,启动项目也是没有启动类.查了下项目中生成的class文件,我靠竟然没有,或者还是以前的.原来是eclipse犯傻了,它没帮我自动编译java文件.一般 ...
- Eclipse不能自动编译 java文件的解决方案
前段时间出现了eclipse 不自动编译java文件的问题,在网上找了好长时间,总算把问题解决了,现在把这个问题的解决方法总结一下. 1,看看project -- Build Automaticall ...
- Eclipse不能自动编译 java文件
在网上的解决方法 方法参考如下: (1) Window-->Preferences-->General-->Workspace 有个"Build automatica ...
- Eclipse不能自动编译 java文件,不会生成CLASS
每次修改类代码后都得重启 Tomcat 花了1天终于解决,网上所说基本是下面1和2的方法,使用之后还是不行最后重新建工作环境导入项目对比了一下找到第三种方法 1.Project 下有个 "B ...
- Tomcat不能自动编译JSP文件问题的一种解决方法
今天碰到一个非常奇怪的问题,机器环境是JDK8.Tomcat8,把jQuery MiniUI ( for Java Eclipse)下载后导入到Eclipse中,首页可以显示,但运行操作数据库的页面出 ...
- 安利一个MVC的好东西,RazorGenerator.MsBuild,可以自动编译cshtml文件
在传统的asp.net webForm 开发里,在发布时,如果选择预编译,就会自动将所有的aspx 文件编译,在发布后的目录里,就看不到aspx的源代码了,同时因为是预编译的,所以每个页面打开速度都挺 ...
- 利用babel自动编译es6文件
一.检查File-Watchers中Babel的Arguments,有一项presets的设置,把他更改为=es2015,详细设置如下: $FilePathRelativeToProjectRoot$ ...
- WebStorm怎么设置实现自动编译less文件
首先,需要保证电脑安装过Node.js,下载地址:https://nodejs.org/en/ 安装Node.js的时候会自动安装npm 然后,安装lessc模块 打开cmd控制台 输入下面一行npm ...
- Grunt 自动编译 Less 文件配置
1.安装Grunt http://www.gruntjs.net/getting-started 2.编辑 package.json 文件 { "name": "Grun ...
随机推荐
- windows上安装ubuntukylin16.04并且在ubuntukylin上安装jdk
1.安装ubuntukylin16.04 教程链接:http://jingyan.baidu.com/article/f71d60379824041ab641d19d.html 我是完全按照这个教程来 ...
- Eclipse中安装Jdk和配置Python
要借助Eclipse辅助工作,之前安装配置都是同事帮忙弄的,今天有空来整理一下安装配置步骤 一.安装JDK1.下载JDK,安装JDK,安装完毕,配置JDK环境变量 1)我的电脑右键-属性-高级-点击 ...
- Flash cc 添加目标Flash Player
原文出处:http://zengrong.net/post/1568.htm 第一步 首先下载最新的 playerglobal.swc(基于Flash Player11): http://www.ad ...
- python 如何读取大文件
一般的读取文件的方法: with open(file_path, "r") as f: print f.read() 或者 with open(file_path,"r& ...
- Spring Boot 系列教程19-后台验证-Hibernate Validation
后台验证 开发项目过程中,后台在很多地方需要进行校验操作,比如:前台表单提交,调用系统接口,数据传输等.而现在多数项目都采用MVC分层式设计,每层都需要进行相应地校验. 针对这个问题, JCP 出台一 ...
- JQuery常用API 核心 效果 JQueryHTML 遍历 Event事件
JQuery 常用API 参考资料:JQuery 官网 jQuery API 中文文档 核心 jQuery 对象 jQuery() 返回匹配的元素集合,无论是通过在DOM的基础上传递的参数还是创建 ...
- 整合改造百度编译器到thinkphp上传图片到OSS
oss上传类库,放到public下,放到extend下,实例化是报错找不到上传类(我不知道为什么).
- hdu 1217 Arbitrage
Flody多源最短路 #include<cstdio> #include<cstring> #include<string> #include<cmath&g ...
- Sass与Compress实战:第八章
概要:帮助你实现样式表的最佳性能 本章内容: ● 样式表拼接 ● 样式表和资源压缩 ● 减少和并行图片请求的策略 ● 选择器性能和优化策略 1. 测量客户端性能 性能优化的起点和终点都是测量.在第一次 ...
- jQuery第六章
jQuery与Ajax应用 一.Ajax的优势和不足 1.Ajax的优势: (1)不需要插件支持:不需要任何浏览器插件就可以被绝大多数浏览器支持 (2)优秀的用户体验:能在不刷新整个页面的前提下更新数 ...