文档章节

WebStorm开启Scss的Source Maps功能

渊翼
 渊翼
发布于 2014/06/08 11:58
字数 294
阅读 8004
收藏 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可以吗。
WebStorm 10 发布,支持 TypeScript 1.4

WebStorm 10 发布,此版本现已提供下载: download! WebStorm 10 发布,此版本包括语言和技术方面支持的改进,显著性能提升,还有强大的各种新特性: 改进 JavaScript 支持 TypeScript 1.4...

oschina
2015/04/01
4K
20
WebStorm 6 来了,Web 开发利器

WebStorm 6 正式版发布了,新版本最值得关注的改进包括: 支持 TypeScript 脚本编码 使用 source maps 进行调试 更方便的使用 JS 库 全新的 IDE 外观和黑主题 了解更多 WebStorm 6 详情» 而...

oschina
2013/03/07
9.8K
49
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 2017.2.2 发布,JavaScript 编辑器

WebStorm 2017.2.2 发布了。WebStorm 是 JetBrains 推出的一款商业的 JavaScript 开发工具。 主要更新内容: 在使用 webpack 时支持在 SCSS 和 Less 中进行输入 (WEB-23707 and WEB-25321) ...

达尔文
2017/08/16
1K
5
WebStorm 2016.1.2 EAP 发布

WebStorm 2016.1.2 EAP 发布了,以下是一些发行说明: No subsystem Bug WEB-20528 Incorrect "Generated source files should not be edited..." warning randomly appears for source file......

oschina
2016/04/07
2.8K
3

没有更多内容

加载失败,请刷新页面

加载更多

Java 如何实现线程间通信?

正常情况下,每个子线程完成各自的任务就可以结束了。不过有的时候,我们希望多个线程协同工作来完成某个任务,这时就涉及到了线程间通信了。 本文涉及到的知识点: thread.join(), object....

颖辉小居
25分钟前
1
0
记一次阿里云服务器运行慢排除

公司测试环境用的阿里云服务器+docker部署的,一共跑了14个项目。之前几个月一直OK,最近几天突然很卡很慢。刚开始以为是项目问题,又是扩大内存,又是清减插件,甚至停了一半项目。结果CPU...

李玉长
26分钟前
2
0
统一客服消息返回错误:{"errcode":43004,"errmsg":"require subscribe hint: [9Vv08633952]"}

公众号或者小程序发送客服消息错误: {"errcode":43004,"errmsg":"require subscribe hint: [9Vv08633952]"} 场景:小程序使用公众号的服务消息,推送消息,如果接收人没有关注公众号,就会出...

tianma3798
37分钟前
1
0
Rainbond V5.0 Beta公测公告

Rainbond支撑企业应用的开发、架构、交付和运维的全流程,通过“无侵入”架构无缝衔接各类企业应用,底层资源可以对接和管理IaaS、虚拟机和物理服务器 Rainbond V5.0即日起开启Beta版本公测,...

好雨云帮
55分钟前
2
0
Word Pattern(leetcode290)

Given a pattern and a string str, find if str follows the same pattern. Here follow means a full match, such that there is a bijection between a letter in pattern and a non-empt......

woshixin
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部