文档章节

WebStorm开启Scss的Source Maps功能

渊翼
 渊翼
发布于 2014/06/08 11:58
字数 294
阅读 7986
收藏 8

本地安装好SCSS后,用WebStorm工具新建一个'*.scss'文件,就会自动提醒是否'Add watcher',直接点击一下就OK啦;前提是要本机安装了Ruby和SCSS才行;

这样WebStorm就会自动新建一个scss的'watcher':

现在,当我们在项目里新建一个'style.scss'后,WebStorm就会自动也生成一个'style.css';


因为,我们是想要把'style.css.map'文件也一起生成,所以需要修改'SCSS'的'File Watcher';


ctrl + alt + s,打开'Settings'--'File Watchers',然后双击'SCSS':下面是默认的'SCSS File Watcher'


修改下面两个地方就可以一起生成'*.map'文件啦:

'Arguments': --no-cache --update $FileName$:$FileNameWithoutExtension$.css

修改后:

'Arguments': --no-cache --update --sourcemap --watch $FileName$:$FileNameWithoutExtension$.css

另一处:

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

修改后:

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

OK,修改完保存,现在新建'style.scss'后就会自动生成'style.css'和'style.css.map'啦:


如果,想把SCSS源文件与生成后的CSS和map文件分开目录,则如下设置:

'Arguments': --no-cache --update --sourcemap --watch $FileName$:$FileParentDir$\css\$FileNameWithoutExtension$.css

© 著作权归作者所有

共有 人打赏支持
渊翼
粉丝 2
博文 6
码字总数 1019
作品 0
海淀
程序员
加载中

评论(2)

jetma
jetma
为什么我没指定sourcemap参数会自动生成map文件
kunl
kunl
必须要安装ruby吗,node可以吗。
WebStorm8.0.3 Live Edit与Google浏览器实时无刷新自动加载页面

在WebStorm8中是自带Live Edit功能的,只是默认没有开启; 1、Ctrl + Alt + S --> Live Edit --> 勾选 Enable live editing,如下图: 2、接下来就是要在Google浏览器中安装 JetBrains IDE ...

渊翼
2014/06/18
0
2
WebStorm 9正式发布——优越而简单

WebStorm 9带了更多引人注目的新特性。包括支持目前最热门、最强大的开发框架及应用库。并在WebStorm 9集成新的工具和改进性能。这次WebStorm 9正式发布,集合之前测试版的信息,整体给开发者...

kouxunli1
2014/10/31
0
0
安装和配置—Webstorm入门指南

WebStrom档案 用途:功能强大的前端专用IDE,拥有即时编辑(chrome)、自动完成、debugger、Zen Coding、HTML5 支持、JSLint、Less支持、CoffeeScript支持、Node.JS、单元测试、集成git和svn...

李长春
2012/11/08
0
2
WebStorm 2018.2 发布,改进 TypeScript 支持

WebStorm 2018.2 正式版本已发布,更新亮点包括: 检验工具提示 新的检验工具现在不仅会显示错误或警告描述,而且还提示最佳的快速修复方法。 查找未使用的代码 使用新的 Code Coverage 功能...

淡漠悠然
07/26
0
0
配置webstorm开发微信小程序

微信开发者工具虽然能编辑代码,可以实时预览,如果只用于临时调试代码是足够的,要是作为小程序的开发工具就很显得很弱鸡了,尤其是与功能强悍的webstorm对比,小程序自带的编辑器简直就是玩...

章鱼喵_
07/12
0
0

没有更多内容

加载失败,请刷新页面

加载更多

聊聊redisson的DelayedQueue

序 本文主要研究一下redisson的DelayedQueue maven <dependency><groupId>org.redisson</groupId><artifactId>redisson</artifactId><version>3.8.1</version></dependenc......

go4it
10分钟前
1
0
一张图看懂JVM

JVM结构示意图 JVM总体概述 JVM总体上是由类装载子系统(ClassLoader)、运行时数据区、执行引擎、内存回收这四个部分组成。其中我们最为关注的运行时数据区,也就是JVM的内存部分则是由方法...

小致dad
12分钟前
0
0
安全管理标准

安全生产严重等级分类: 故障频次: 风险等级矩阵:

乔老哥
43分钟前
2
0
数据结构“树”的相关微视频

今天在腾讯视频上闲逛,然後发现一个叫“岚人”的用户上传了几段小视频,基本上都在5分钟以内,讲解了关于树的一些结构和算法。零代码,非常适合初学者入门。不过,对于老鸟来说,这也是非常...

Iridium
55分钟前
1
0
10-利用思维导图梳理JavaSE-Java 集合

10-利用思维导图梳理JavaSE-Java 集合 主要内容 1.Collection接口 2.Set接口 2.1.Set接口概述 2.2.HashSet类 2.3.TreeSet类 2.4.SortedSet接口 3.List接口 3.1.List接口概述 3.2.ArrayList类...

飞鱼说编程
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部