WebStorm开启Scss的Source Maps功能
博客专区 > 渊翼 的博客 > 博客详情
WebStorm开启Scss的Source Maps功能
渊翼 发表于4年前
WebStorm开启Scss的Source Maps功能
  • 发表于 4年前
  • 阅读 7925
  • 收藏 8
  • 点赞 0
  • 评论 2

【腾讯云】如何购买服务器最划算?>>>   

摘要: WebStorm默认可以直接将scss转换成css,需要手动修改File Watchers才能自动输出Source Maps文件。

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

标签: WebStorm SCSS sourcemap
共有 人打赏支持
粉丝 1
博文 6
码字总数 1019
评论 (2)
kunl
必须要安装ruby吗,node可以吗。
jetma
为什么我没指定sourcemap参数会自动生成map文件
×
渊翼
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: