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. winform开线程，避免页面假死

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  2. laravel sum 多个字段

    laravel中怎么实现下面的SQL select sum('profit'),sum('order_count') from pro where......; 参考 self::where('id' ...

  3. kali rolling 安装typecho

    #1 apt-get install nginx php7.0 php7.0-mysql php7.0-gd php7.0-cgi php7.0-cli php7.0-curl php7.0-fpm ...

  4. sql 各种格式

    --以2013-12-10 12:56:55为例--convert(nvarchar(10),CreateDate,120)      =>      2013-12-10--DATEPART( ...

  5. ES6（一）let const

    1.let 声明变量 let和var区别: let 只在变量声明时所在的代码块内有效 let不允许在同一作用域内重复声明变量 let不存在变量提升 const: 也是声明一个只读常量,一旦声明,常量的 ...

  6. Ubuntu 安装Composer

    操作系统:Ubuntu 14.04.2 1.自动安装 $ curl -sS https://getcomposer.org/installer | php 2.更新 $ composer self-u ...

  7. css3选择器：nth-child和nth-of-type之间的差别

    <section> <p>我是第1个p标签</p> <p>我是第2个p标签</p> </section> 然后对应2个选择器对应 ...

  8. 一个突发性的误解C# 引用类型

    最近再看IOCP,结果里面的一个赋值过程,造成了误解. test t1 = new test(); test t2 = new test(); test t4 = new test(); t1= t2 ...

  9. Ctrl+Alt+T恢复启动Ubuntu默认终端

    对于Ubuntu14.04,如果安装了terminator,那么快捷键Ctrl+Alt+T将不会启动自带的terminal,而是启动安装的terminator,如果想恢复回来,可以执行以下命令: su ...

  10. c# delegate的invoke和bejinInvoke的区别

    先看下面实实例代码 private delegate void testdg(); private void button1_Click(object sender, EventArgs e)     ...