1. 去node的主页下载对应版本的nodejs然后安装下载地址：http://nodejs.org/   根据自己的系统选择合适的版本下载。
  2. 安装完成之后打开命令提示符（win+r 输入cmd 回车）,分别输入node -v以及npm -v如果返回版本号说明你安装成功了
  4. 接下来就可以安装less了，在“命令提示符”下运行命令“npm install less -g”，然后npm就自动开始下载并安装LESS。
  6. 　　配置webstorm（版本10），点击“文件”> "设置"(Ctrl+Alt+S) 弹出设置界面，在左侧导航找到“工具(tool)">"file Watchers" 点击“+”号按钮找到less文件选项点击添加。
  8. 配置参数
    1. Arguments : --no-color --source-map=$FileNameWithoutExtension$.css.map $FileName$
    2. Output paths to refresh : $FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map
    3. 配置完参数后,写完less代码后,会直接在less文件的目录下生成一个.css文件和一个.css.map文件
    4. .css.map文件的作用是可以直观的在浏览器调试界面看到的是less文件的第几行
      1. 因为你是用less写的样式，less会编译成css显示在页面上。
      2. 但有个麻烦，浏览器里看的都是css第几排，而你编辑的又是less文件，很难对上。
      3. 这个时候有了source map，浏览器里直接显示less，非常方便。

webstoem自动编译less文件的更多相关文章

  1. Eclipse不自动编译java文件的终极解决方案

    最近我的eclipse经常犯傻,项目中总是有很多,启动项目也是没有启动类.查了下项目中生成的class文件,我靠竟然没有,或者还是以前的.原来是eclipse犯傻了,它没帮我自动编译java文件.一般 ...

  2. Eclipse不能自动编译 java文件的解决方案

    前段时间出现了eclipse 不自动编译java文件的问题,在网上找了好长时间,总算把问题解决了,现在把这个问题的解决方法总结一下. 1,看看project -- Build Automaticall ...

  3. Eclipse不能自动编译 java文件

      在网上的解决方法 方法参考如下: (1) Window-->Preferences-->General-->Workspace  有个"Build automatica ...

  4. Eclipse不能自动编译 java文件，不会生成CLASS

    每次修改类代码后都得重启 Tomcat 花了1天终于解决,网上所说基本是下面1和2的方法,使用之后还是不行最后重新建工作环境导入项目对比了一下找到第三种方法 1.Project 下有个 "B ...

  5. Tomcat不能自动编译JSP文件问题的一种解决方法

    今天碰到一个非常奇怪的问题,机器环境是JDK8.Tomcat8,把jQuery MiniUI ( for Java Eclipse)下载后导入到Eclipse中,首页可以显示,但运行操作数据库的页面出 ...

  6. 安利一个MVC的好东西,RazorGenerator.MsBuild，可以自动编译cshtml文件

    在传统的asp.net webForm 开发里,在发布时,如果选择预编译,就会自动将所有的aspx 文件编译,在发布后的目录里,就看不到aspx的源代码了,同时因为是预编译的,所以每个页面打开速度都挺 ...

  7. 利用babel自动编译es6文件

    一.检查File-Watchers中Babel的Arguments,有一项presets的设置,把他更改为=es2015,详细设置如下: $FilePathRelativeToProjectRoot$ ...

  8. WebStorm怎么设置实现自动编译less文件

    首先,需要保证电脑安装过Node.js,下载地址:https://nodejs.org/en/ 安装Node.js的时候会自动安装npm 然后,安装lessc模块 打开cmd控制台 输入下面一行npm ...

  9. Grunt 自动编译 Less 文件配置

    1.安装Grunt http://www.gruntjs.net/getting-started 2.编辑 package.json 文件 { "name": "Grun ...

随机推荐

  1. ansible 判断和循环

    标准循环 模式一 - name: add several users user: name={{ item }} state=present groups=wheel with_items: - te ...

  2. ueditor1.4.3 在IE8下的 BUG

    ueditor1.4.3  .net 版 在IE8 下,多图片上传完成后,点击确认时报错,无法插入图片到编辑器中 原因是 ueditor.all.js 中的 24835 行 if (whitList[ ...

  3. 函数:atexit

    函数说明: 1.原型:int atexit (void (*func)(void)); 2.功能:注册退出main函数之后将要被执行的函数: 3.参考:http://www.cplusplus.com ...

  4. 一个初学者的辛酸路程-FTP-9

    前言 今天,我要描述一个FTP的故事 主要内容 嗯,今天主要以阶梯性的形式来做一个FTP项目. 第一步: 我要实现这么一个功能,一个FTP客户端,1个FTP服务端,2端建立连接以后可以进行通讯. 服务 ...

  5. iOS摇一摇功能、震动功能、简单的摇动动画、生成二维码图片与发送短信等几个功能

    有一个开锁的功能,具体的需求就类似于微信的"摇一摇"功能:摇动手机,手机震动,手机上的锁的图片摇动一下,然后发送开锁指令.需求简单,但用到了许多方面的知识. 1.摇一摇 相对这是最 ...

  6. setAction方法 Snackbar 右侧按钮可以被点击并处理一些事件

    从数据库同一记录取得的字段所组装成的对象应该是同一个对象,然后由不同的Session从数据库同一条记录上分别取得对象,它们的内存地址是不一样的. 一般来说,常见的数字加密方式都可以分为两类,即对称加密 ...

  7. 【转】Freemarker输出$和html标签等特殊符号

    原文:http://blog.csdn.net/achilles12345/article/details/41820507 场景:程序员都不喜欢看文档,而更喜欢抄例子.所以,我们把平台组的组件都做成 ...

  8. Android:View颤抖的动画效果代码

    public void propertyValuesHolderDown(final View view) { PropertyValuesHolder pvhX = PropertyValuesHo ...

  9. each用法的总结

    1.选择器+遍历 $('div').each(function (i){ i就是索引值 this 表示获取遍历每一个dom对象 }); 2.选择器+遍历 $('div').each(function  ...

  10. jquery的animate动画

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...