文档章节

WebStorm开启Scss的Source Maps功能

渊翼
 渊翼
发布于 2014/06/08 11:58
字数 294
阅读 7964
收藏 8
点赞 0
评论 2

本地安装好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

© 著作权归作者所有

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

评论(2)

jetma
jetma
为什么我没指定sourcemap参数会自动生成map文件
kunl
kunl
必须要安装ruby吗,node可以吗。
Webstorm+Chrome plugins JetBrains IDE Support实现强大的JavaScript调试功能

前言 WebStorm是Jetbrains公司旗下一款JavaScript 开发工具,当你打开这款软件的时候会觉得特别的熟悉,因为它和itellj idea属于同款产品,界面和快捷键基本类似,而且功能非常强大,提示也非...

changyinling520 ⋅ 05/10 ⋅ 0

WebStorm 2018.1.3 新增与 Angular 6 支持相关的改进

WebStorm 2018.1.3 已发布,请使用 Toolbox App 或 IDE 进行更新,或直接下载 WebStorm 2018.1.3。 官方的发布公告显示,本次更新添加了许多与 Angular 6 支持相关的改进(包括从 IDE 欢迎屏...

局长 ⋅ 05/10 ⋅ 0

IntelliJ IDEA和webstorm一直卡在scanning files to index解决方案

最近做新的项目,cnpm install 之后node_modules 中文件暴增,导致webstorm一直卡在“Scanning files to index ......”甚至几度崩溃,切换为IntelliJ IDEA结果一致。无奈+烦躁,在网上找了解...

四小七 ⋅ 05/10 ⋅ 0

前端开发: WebStorm局域网手机真机调试

1. 做好准备工作 安装webstorm以及新建一个项目写个demo 确保是同一局域网,同一个路由器下的WiFi或者其他内部网络 安装google二维码插件 (草料二维码) 2. 开始设置 用webstorm打开demo,打开偏...

BoooBooo冰Booo ⋅ 05/22 ⋅ 0

WebStorm mac版破解方法(包括下载地址* 支持windows)

//联系人:石虎 QQ:1224614774 昵称:嗡嘛呢叭咪哄 作者通过文章感恩女神的大力支持,感谢!感谢!感谢! 女神图: 女神图: 一、下载并且安装 webStorm 开发软件 1、进入 下载 https://www.newasp...

石虎132 ⋅ 04/19 ⋅ 0

WebStorm mac下如何安装WebStorm + 破解

1、下载软件最好的地址就是官网了 下载地址 选择好系统版本以后点击DOWNLOAD 2、安装 双击下载好的安装包、将WebStromt拖入application文件夹,然后在Launchpad中找到并打开...

sinat_17775997 ⋅ 04/27 ⋅ 0

手把手教你React Native实战从 React到Rn《二》

了解相关更多技术,可参考《学习React Native必看的几个开源项目》,接下来 我们来聊一聊相关的React。 React简介 Rn是基于React的设计,了解 React有助于我们开发RN应用,React希望将功能分...

codeGoogle ⋅ 06/01 ⋅ 0

svn检出时报错,Error: Repository moved temporarily to 'xxx'

用HBuilder自带的svn插件检出没有任何问题,用webstorm的SVNTool检出和用小乌龟svn检出就会报这个错误 求大神解惑

程序员与程序猿 ⋅ 04/28 ⋅ 0

pycharm在安装nodejs后因node_modules目录导致太卡的解决方法

打开项目设置,把node_modules目录设置为Excluded,立马解卡. 同理,适用于jetbrains公司的其他ide,比如phpstorm,webstorm等. 对于项目中其他不需要index的目录也可以这样设置一下,提高速度....

漫步海边小路 ⋅ 04/29 ⋅ 0

使用MySQL Workbench修改表字符集

问题 MySQL官方网站提供了诸多免费的数据库操作工具,其中, Workbench是一款免费的极佳可视化数据库管理工具,你只需要下载最新版本,即可随心所欲地管理以往许多其他版本的数据库,当然配合...

朱先忠老师 ⋅ 05/09 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

从方法论到零售客户实践 解码阿里巴巴数据中台——2018上海云栖大会

摘要: 一、数据中台之道 6月8日,上海云栖大会进入了第二天的议程,数据中台专场论坛座无虚席,数据中台总架构师邓中华女士向在场的观众介绍了数据中台的衍生发展之道。 基于OneID、OneData...

阿里云云栖社区 ⋅ 24分钟前 ⋅ 0

Ubuntu部署django问题汇总

使用Anaconda3的Python3.6的pip安装UWSGI报错 原因是gcc版本不兼容,安装4.7并修改gccsudo apt-get install gcc-4.7sudo mv /usr/bin/gcc /usr/bin/gcc.baksudo ln -s /usr/bin/gcc-4.......

wuyaSama ⋅ 27分钟前 ⋅ 0

从方法论到零售客户实践 解码阿里巴巴数据中台——2018上海云栖大会

摘要: 一、数据中台之道 6月8日,上海云栖大会进入了第二天的议程,数据中台专场论坛座无虚席,数据中台总架构师邓中华女士向在场的观众介绍了数据中台的衍生发展之道。 基于OneID、OneData...

猫耳m ⋅ 27分钟前 ⋅ 0

Docker减肥小记

如果经常使用 docker,你会发现 docker 占用的资源膨胀很快,其中最明显也最容易被察 如何快速的清理 docker 占用的系统资源,具体点说就是删除那些无用的镜像、容器、网络和数据卷… 1、查看...

寰宇01 ⋅ 38分钟前 ⋅ 0

微信小程序中如何使用WebSocket实现长连接(含完整源码)

本文由腾讯云技术团队原创,感谢作者的分享。 1、前言 微信小程序提供了一套在微信上运行小程序的解决方案,有比较完整的框架、组件以及 API,在这个平台上面的想象空间很大。腾讯云研究了一...

JackJiang- ⋅ 45分钟前 ⋅ 0

定制库到Maven本地资源库

1.如果只有定制库的JAR文件 下载链接如下:pdf.jar 2.使用命令转换成Maven本地资源 mvn install:install-file -Dfile=/Users/manager/Downloads/clj-pdf-2.2.33.jar -DgroupId=clj-pdf -Dar......

年少爱追梦 ⋅ 50分钟前 ⋅ 0

高仿springmvc之xuchen-mvc

package org.mvc.framework.servlet; import java.io.BufferedReader; import java.io.ByteArrayInputStream; import java.io.ByteArrayOutputStream; import java.io.File; import java.io.......

徐志 ⋅ 52分钟前 ⋅ 0

关于自定义URLStreamHandler的一次踩坑

关于自定义URLStreamHandler的一次踩坑 20180625 lambo init 说明 一般自定义实现url的协议解析.方案为实现URLStreamHandler.实现其 openConnection 就可以了, 如果我们执行 new URL("xx://...

林小宝 ⋅ 53分钟前 ⋅ 0

【SM2证书】利用BC的X509v3CertificateBuilder组装X509国密证书

演示证书文件 链接: https://pan.baidu.com/s/1ijHNnMQJj7jzW-jXEVd6Gg 密码: vfva 所需jar包 <!-- https://mvnrepository.com/artifact/org.bouncycastle/bcpkix-jdk15on --> <dependenc......

小帅帅丶 ⋅ 54分钟前 ⋅ 0

用Calendar 实现 计算 一段时间的毫秒值

Calendar c=Calendar.getInstance();c.add(Calendar.MONTH, -1);int lastMonthMaxDay=c.getActualMaximum(Calendar.DAY_OF_MONTH);c.set(c.get(Calendar.YEAR), c.get(Calendar.MONTH)......

岸芷汀兰 ⋅ 58分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部