1. 去node的主页下载对应版本的nodejs然后安装下载地址:http://nodejs.org/   根据自己的系统选择合适的版本下载。
  2. 安装完成之后打开命令提示符(win+r 输入cmd 回车),分别输入node -v以及npm -v如果返回版本号说明你安装成功了
  3. 接下来就可以安装less了,在“命令提示符”下运行命令“npm install less -g”,然后npm就自动开始下载并安装LESS。
  4.   配置webstorm(版本10),点击“文件”> "设置"(Ctrl+Alt+S) 弹出设置界面,在左侧导航找到“工具(tool)">"file Watchers" 点击“+”号按钮找到less文件选项点击添加。
  5. 配置参数
    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. Dylans loves numbers

    Problem Description Who is Dylans?You can find his ID in UOJ and Codeforces. His another ID is s1451 ...

  2. Flashbuilder 破解方式 4.6 +4.7(网络资源整理)

    Fb4.6 破解方式 安装完成后在安装目录下依次修改下列3个文件: (1).eclipse\plugins\com.adobe.flexbuilder.project_4.6.0.328916\MET ...

  3. 简单的socket方法

    void sockfunc() { WSADATA Ws; WSAStartup(MAKEWORD(,), &Ws); SOCKET hs = socket(AF_INET, SOCK_STR ...

  4. php常用数学函数

    php常用数学函数1. bcadd 任意精度数的相加2. bcsub 任意精度数的减法3. bcmul 乘法, bcdiv除法 4. bcmod 取余数. (比%功能更强大)5. bcpow 幂函数运 ...

  5. mac版VMware fusion

    百度网盘链接:链接: https://pan.baidu.com/s/1o8BAsrg 安装教程网上很多的,首先要下载一个window 10或其他版本的iso镜像文件,然后很好安装的.

  6. jQuery(3)——DOM操作

    ---恢复内容开始---   jQuery中的DOM操作 [DOM操作分类] DOM操作分为DOM Core(核心).HTML-DOM和CSS-DOM三个方面. DOM Core:任何一种支持DOM的 ...

  7. JSON.parse() JSON.stringify() eval() jQuery.parseJSON() 的区别

    http://www.jb51.net/article/81880.htm    :   jQuery.parseJSON(jsonString) : 将格式完好的JSON字符串转为与之对应的Java ...

  8. .net webapi项目中支持session

    webapi中默认是不支持session的开启的 需要在Global.asax文件中,添加如下代码 public override void Init() { this.PostAuthenticat ...

  9. BBED跳过归档

    通过BBED 跳过归档,以当前数据库 8号文件为例: SQL; FILE# NAME ---------- ---------------------------------------------- ...

  10. ggplot2 scale相关设置-坐标转换

    ggplot2 scale相关设置-坐标转换 在R中坐标轴转换有多种形式,包括对数转换,平方根转换以及坐标刻度前后进行调换 用到的函数分别有: scale_x_log10(...) scale_y_l ...