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. HTML5 <meta> 标签属性

    基本标签SEO 优化为移动设备添加 viewportWindows 8其他 禁止数字识自动别为电话号码不让android识别邮箱每 8 秒刷新一次页面移动端的头部标签和meta 基本标签 声明文档使用 ...

  2. linux 下执行.sh文件提示permission denied

    linux 下执行.sh文件提示permission denied 在脚本文件目录下运行命令,赋予权限: chmod 777 *.sh or chmod +x  *.sh

  3. /home 和 /root

    /root     Linux超级权限用户root的家目录./home 如果我们建立一个用户,用户名是"xx",那么在/home目录下就有一个对应的/home/xx路径,用来存放用 ...

  4. 浏览器标题栏添加小logo图片，记录一下，方便以后用

    效果如图:这是富连网的logo的实现,只需一行代码,我就写给自己和那些不知道的人吧 <link rel="icon" type="image/x-icon" ...

  5. Hbulider里面template模板自用

    template.js 一款 JavaScript 模板引擎,简单,好用.提供一套模板语法,用户可以写一个模板区块,每次根据传入的数据,生成对应数据产生的HTML片段,渲染不同的效果. 特性: 模版编 ...

  6. util:properties与context:property-placeholder

    spring 使用注解装配的Bean如何使用property-placeholder属性配置中的值 这个问题不大不小,以前偷懒凡是碰到需要引用属性文件中的类时就改用xml来配置. 今天看了下sprin ...

  7. NameCheap域名注册商的几个特点介绍

    作为站长,我们拥有选择3-5家域名注册商,把自己的域名放置在不同的平台也是应该的,因为不同的注册商都有不同的值得我们选择的理由.作为已经使用namecheap注册商超过5年,拥有数百个域名的我来说,分 ...

  8. Recover the String

    Recover the String 题目链接:http://codeforces.com/contest/709/problem/D 构造 这题乍一看很难构造,但是如果知道了整个字符串中'0'和'1 ...

  9. background-clip、background-origin、box-sizing

    background-clip:border-box(默认).padding-box.content-box background-origin:border-box.padding-box(默认). ...

  10. 基于Bootstrap的炫酷jQuery slider插件

    简要教程 这是一款在原生bootstrap slider的基础上制作效果非常炫酷的jQuery slider插件.该slider插件可以自定义slider的颜色.形状.透明度和tooltip等属性,美 ...