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 ...
随机推荐
- 用TextKit实现图文混排(转载)
Textkit是iOS7新推出的类库,其实是在之前推出的CoreText上的封装,有了这个TextKit,以后不用再拿着CoreText来做累活 了,根据苹果的说法,他们开发了两年多才完成,而且他们在 ...
- CSS3 Filter滤镜效果
关注到它是在一次分享会当中,很神奇,只需写一行代码就可以变身很美的视觉效果,这就是CSS3滤镜. 语法 filter:fuction(param); 如今浏览器支持情况相比以前乐观很多,点击查看兼容 ...
- Memory Limits for Windows and Windows Server Releases
来源:https://msdn.microsoft.com/en-us/library/windows/desktop/aa366778(v=vs.85).aspx Limits on memory ...
- Webdriver常用的元素定位
Webdriver常用定位元素的方法有以下八种: id.name.class name.tag name.link text.partial link text.xpath.class selecto ...
- JPG 图片在IE下不能显示的问题
最近碰到一些客户说,我传的产品图片怎么在网站上无法显示啊.图片也是正常的jpg格式呢. 是的,你传的图片是JPG的,但是怎么就显示不出来呢? 你找深圳网站建设的公司给你建了一个网站,然后在 ...
- Python 第二课笔记
1.模块初识 Python标准库和第三方库, 写好的功能封装好,起个名字,就是模块也叫库,直接导入就能用了. 标准库就是不需要安装,就能够导入的库 第三方库必须下载,安装才能使用的库. 1.1 两个标 ...
- 去除右键的opendgl
Windows Registry Editor Version 5.00[-HKEY_CLASSES_ROOT\Unknown\shell\opendlg][-HKEY_CLASSES_ROOT\Un ...
- geekNews 学习总结
1:下移隐藏,上移出现 //android.support.v4.widget.NestedScrollView nsvScroller; //FrameLayout llDetailBottom; ...
- javaWEB总结(8):自定义GenericServlet
前言: 项目的实际应用中,我们往往为了方便去继承GenericServlet类,而不是去实现Servlet接口,是什么原因呢?下面进行简单的实践操作. 一. 准备工作 1.首先看GenericServ ...
- Python统计栏目页面数量
主要为了装个B,统计栏目页面数量时候用的,多线程基本照抄 http://www.cnblogs.com/fnng/p/3670789.html 关于对SEO有什么用处...我觉得...仅对本人有用,P ...
