1、双击桌面Chrome图标,打开Chrome,按键盘“F12”键,打开开发工具界面,点击其右上角的“设置”按钮,勾选“Enable JavaScript source maps”  及“Enable CSS source maps”。

2、打开WebStorm,点File-->Settings,找到File Watchers,点右侧的“+”,选择LESS,更改对应项的设置如下:

Program:C:\Users\wind\AppData\Roaming\npm\lessc.cmd   (less的安装路径,祥见文章结尾备注。)

Arguments:--no-color --source-map=$FileNameWithoutExtension$.css.map $FileName$

Working directory:$FileDir$

Output paths to refresh:$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map

单击右下的“OK”。

3、回到WebStorm打开项目的页面,点右键新建一个lesstest的less文件,会自动产出lesstest.css和lesstest.css.map。

产出的对应的map文件为:

{"version":3,"sources":["lesstest.less"],"names":[],"mappings":";;;;AAKA;EAAO,WAAA;EAAW,gBAAA;EAAgB,kBAAA;EAAkB,mBAAA;EAAmB,sBAAA;;AACvE,KAAM;EAAO,cAAA","file":"undefined"}

4、写一段less测试一下,会自动编译成css。

备注:做此配置前要事先安装好nodejs,再装好less组件。具体安装方法请见教程《Windows7 x64系统下安装Nodejs并在WebStorm 9.0.1下搭建编译less环境》,http://www.cnblogs.com/wind128/p/4135972.html

WebStorm 9 自动编译 LESS 产出 CSS 和 source maps的更多相关文章

  1. WebStorm 9 自动编译 SCSS 产出 CSS 和 source maps

    1.  上一节我们学习了Windows下搭建Ruby开发环境,也为这一节的学习做了铺垫.因为本节需要在Ruby环境下安装SASS.详细请见:http://www.cnblogs.com/wind128 ...

  2. 用webstorm自动编译less产出css和sourcemap

    css产出sourcemap有什么用呢,可能大家要问这个问题了. 请移步这里 https://developers.google.com/chrome-developer-tools/docs/css ...

  3. [less]用webstorm自动编译less产出css和sourcemap

    css产出sourcemap有什么用呢,可能大家要问这个问题了. 请移步这里 https://developers.google.com/chrome-developer-tools/docs/css ...

  4. 使用VS Code开发纸壳CMS自动编译主题压缩CSS,JS

    Visual Studio Code (简称 VS Code / VSC) 是一款免费开源的现代化轻量级代码编辑器,支持语法高亮.智能代码补全.自定义热键.括号匹配.代码片段.代码对比 Diff.GI ...

  5. webstorm 设置 sass自动编译问题

    sass语法.使用它带来的好处,就不再这里做介绍了,主要看怎么在webstorm里配置自动编译. sass编译是需要Ruby环境的,可以到这里去下载  :  https://rubyinstaller ...

  6. 在webstorm中配置sass的自动编译,并且可以指定编译后的css的目录.

    参考: WebStorm-2018.2-Help-Sass, Less, and SCSS 作者:tobyDing链接:https://www.jianshu.com/p/0fe52f149cab來源 ...

  7. 让webStorm支持自动监听编译scss文件

    前提概要 今日,重装了两波系统,,,之前安装的各种环境都忘光了,重新又踩一次坑的感觉很不舒服,所以记录一下配置自动编译scss一路遇到的坑 一.webstrom run的时候控制台输出的错误中文提示乱 ...

  8. webstorm配置scss自动编译路径

    webstorm支持sass的同步编译,也就是即写即编译,并且可以指定编译后的css的目录. 本文使用的webstorm为8.0版本 scss安装:http://www.w3cplus.com/sas ...

  9. webstorm和intellij idea下如何自动编译sass和scss文件

    webstorm和intellij idea下如何自动编译sass和scss文件 https://segmentfault.com/a/1190000008996504 https://www.jia ...

随机推荐

  1. mysql 基本操作语句

    mysql 基本操作笔记: 创建表demo:CREATE TABLE `role` ( `role_id` int(10) unsigned NOT NULL AUTO_INCREMENT COMME ...

  2. 5.webService拦截器

    CXF为什么要设计拦截器? 为了在webservice请求过程中,能动态操作请求和响应数据, CXF设计了拦截器. 拦截器分类 1.按所处的位置分:服务器端拦截器,客户端拦截器 2.按消息的方向分:入 ...

  3. 【C-01关键字】

    一.语句引导关键字 for   while   swith  if  do   goto   return 二.限定关键字 const  static   extern 三.预编译关键字 #inclu ...

  4. hdu2604(递推,矩阵快速幂)

    题目链接:hdu2604 这题重要的递推公式,找到公式就很easy了(这道题和hdu1757(题解)类似,只是这道题需要自己推公式) 可以直接找规律,推出递推公式,也有另一种找递推公式的方法:(PS: ...

  5. python学习GUIwxpython不支持中文输出入的问题

    # -*- coding: utf8 -*- import wx def load(event): file = open(filename.GetValue()) contents.SetValue ...

  6. 2013-08-12【随笔2】-Roy

    最近总是因为一下小事情,就会变得闹心,就会自己胡思乱想,自己吓唬自己,自己给自己找烦恼. 是因为每天无所事事,日子过得没有了重点,然后每天人心惶惶,有点杞人忧天了. 还是因为这样平淡的日子,消磨了我们 ...

  7. unity 状态机 + svn + 码云 上篇

    最近刚找到在实习,忙于公司一个c++ 项目 ,一直想写博客来着,没时间写今天熬夜打算先献上自己前几天自己封装的一个fsm状态机 话不多说,直接上正题,这篇博客主要是在学校的时候状态机一直使用的是pla ...

  8. 基于Selenium的自动化测试 C#版(1)

    引子 我一直在思考,作为一个架构师,如何简化程序员的工作,减轻运维的压力,减低测试的要求.然后做了很多很多的尝试.最开始的公司培训文档,一键发布工具,Nuget版本管理,VS项目模板,SOA统一服务提 ...

  9. Docker Registry搭建私有仓库

    利用Registry镜像搭建Docker私有仓库遇到了很多坑,说来也是找到的资料都是杂而不精的东西,所以也没少走了弯路,现在回过头看去感觉好多坑还是别人给挖的··· 不过努力的最终结果还是好的,因为找 ...

  10. 分布式系统一致性问题和Raft一致性算法

    一致性问题 一致性算法是用来解决一致性问题的,那么什么是一致性问题呢? 在分布式系统中,一致性问题(consensus problem)是指对于一组服务器,给定一组操作,我们需要一个协议使得最后它们的 ...