WebStorm自动编译LESS产出CSS和source maps

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-cache --update --sourcemap --watch $FileName$:$FileNameWithoutExtension$.css

Working directory:$FileDir$

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

单击右下的“OK”。

3、回到打开的页面,点右键新建一个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

时间: 2024-10-08 09:38:39

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

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

css产出sourcemap有什么用呢,可能大家要问这个问题了. 请移步这里 https://developers.google.com/chrome-developer-tools/docs/css-preprocessors?hl=zh-CN 在chrome中我们通过sourcemap可以直接调试less源文件文件,这是一个非常强大的功能. 下面由我为大家道来 1.在chrome中开启dev工具,开启容许CSS source maps设置 2.webstorm中只要创建了less扩展名的文件

webstorm 自动编译ts

1.在目录根目录添加tsconfig.json { "compileOnSave": false, "compilerOptions": { // 文件目录 "baseUrl": "./", // 输出目录,貌似不能和输入目录相同 555 "outDir": "./js", "sourceMap": true, "declaration": fal

webstorm 设置 sass自动编译问题

sass语法.使用它带来的好处,就不再这里做介绍了,主要看怎么在webstorm里配置自动编译. sass编译是需要Ruby环境的,可以到这里去下载  :  https://rubyinstaller.org/downloads/    ,安装时选择加入Path 安装完成后需测试安装有没有成功,运行CMD输入以下命令: ruby -v //如安装成功会打印 ruby 2.2.2p95 (2015-04-13 revision 50295) [i386-mingw32] 如上已经安装成功,Ruby

前端构建:Source Maps详解

一.前言 当使用CoffeeScript.ClojureScript编写前端脚本时,当使用Less.Sacc编写样式规则时,是否觉得调试时无法准确找到源码位置呢?当使用jquery.min.js等经压缩后的工具库时,是否觉得连调试的门都不不知道在哪呢? 针对上述问题,google为我们提供了Source Maps这一解决方案,以下内容为对Source Maps的学习记录,以便日后查阅. 由于篇幅较长,特设目录一坨! 二.示例 三.Source Maps方案详解 1. 方案结构 2. 支持的浏览器

Webstorm 10 自动编译 LESS(windows环境)

0. 安装 NodeJS + LESS 登陆 NodeJS 官网,下载对应版本安装.WIN键 + R 打开 CMD 窗口,输入 node -v npm -v 能够回显版本号就证明安装成功了输入 npm 并回车,进入 npm 模式,执行 npm install less -g 安装 LESS,这里容易撞墙,卡住了就挂个梯子. 1. 设置下windows文件夹选项,让系统显示隐藏文件. 2. 添加 File Watcher 打开 Webstorm ,依次展开菜单 File –> Setting –>

webstorm下的sass自动编译和移动端自适应实践

http://www.fawwheel.com/shahramLu/p/6477731.html webstorm下的sass自动编译和移动端自适应实践 1.安装Ruby 2.安装sass 3.webstorm配置file watcher 4.移动端自适应 1.安装Ruby 安装Ruby,有多种方式,打开官网下载 因为,使用的是window选择RubyInstall,下载地址 RubyInstall下载地址 选择对应系统的版本,下载完成,安装 添加到path,建议勾上,安装完成后,打开开始面板,

webstorm配置scss自动编译路径

webstorm支持sass的同步编译,也就是即写即编译,并且可以指定编译后的css的目录. 本文使用的webstorm为8.0版本 点击左上角的File→Settings→File Watchers 在弹窗的窗口的右上角点击绿色的 ‘+’ 号,然后选择scss ------------------------------------------------------------------------------- Arguments: 可以配置编译后的文件的输出路径,我这里写的是: --n

Sublime Less 自动编译成css

1.note编译 1.下载notejs https://nodejs.org/en/ 2.首先你要安装lessc.我是用npm包管理器直接安装的,只需要一条命令,如下: npm install less -g 3.检查lessc是不是安装成功了: lessc -v 在 cmd中可以手动编译 然后可以手动编译less文件为css (f:\WorkFiles\天津欢乐谷\style\alan.less) 进入目录 :cd f:\WorkFiles\天津欢乐谷\style lessc alan.les

Hbuilder中的less不能自动编译为css怎么办

最近用hbuilder 写less文件,保存后发现无法将less文件自动编译成css文件,删掉,重装,依旧不行,每次都要在less文件上右键->编译 才能得到最新的css文件,本来就是件高效率的事,但这么一来,兴致全无. 那么有没有Hbuilder中的less不能自动编译为css的解决方案?快来跟小编一起学习吧! 方法/步骤1:less不能自动编译为css,一般只要设置预编译就可以了,第一步,打开hbuilder的工具栏,找到预编译器设置(如图所以),点击less,然后选编译(如果没图片中的选项