1、  上一节我们学习了Windows下搭建Ruby开发环境,也为这一节的学习做了铺垫。因为本节需要在Ruby环境下安装SASS。详细请见:http://www.cnblogs.com/wind128/p/4226058.html

2、  安装SASS,运行cmd命令,输入:

gem install sass

安装成功后打开目录C:\Ruby21-x64\bin,可见sass.bat、scss.bat文件。

3、  打开WebStorm,点File-->Settings,找到File Watchers,点右侧的“+”,选择SCSS,更改设置如下:

Program:C:\Ruby21-x64\bin\scss.bat

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

Working directory:$FileDir$

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

完成后点击右下的“OK”按钮。

4、回到WebStorm打开项目的页面,点右键新建一个scsstest的scss文件,会自动产出scsstest.css和scsstest.css.map。

产出的对应的map文件为:

{

"version": 3,

"mappings": "",

"sources": [],

"names": [],

"file": "scsstest.css"

}

5、写一段scss测试一下,会自动编译成css。

WebStorm 9 自动编译 SCSS 产出 CSS 和 source maps的更多相关文章

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

    1.双击桌面Chrome图标,打开Chrome,按键盘“F12”键,打开开发工具界面,点击其右上角的“设置”按钮,勾选“Enable JavaScript source maps”  及“Enable ...

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

    css产出sourcemap有什么用呢,可能大家要问这个问题了. 请移步这里 https://developers.google.com/chrome-developer-tools/docs/css ...

  3. [less]用webstorm自动编译less产出css和sourcemap

    css产出sourcemap有什么用呢,可能大家要问这个问题了. 请移步这里 https://developers.google.com/chrome-developer-tools/docs/css ...

  4. 使用VS Code开发纸壳CMS自动编译主题压缩CSS,JS

    Visual Studio Code (简称 VS Code / VSC) 是一款免费开源的现代化轻量级代码编辑器,支持语法高亮.智能代码补全.自定义热键.括号匹配.代码片段.代码对比 Diff.GI ...

  5. 让webStorm支持自动监听编译scss文件

    前提概要 今日,重装了两波系统,,,之前安装的各种环境都忘光了,重新又踩一次坑的感觉很不舒服,所以记录一下配置自动编译scss一路遇到的坑 一.webstrom run的时候控制台输出的错误中文提示乱 ...

  6. webstorm 设置 sass自动编译问题

    sass语法.使用它带来的好处,就不再这里做介绍了,主要看怎么在webstorm里配置自动编译. sass编译是需要Ruby环境的,可以到这里去下载  :  https://rubyinstaller ...

  7. vscode--搭建自动编译sass环境

    一,安装插件及使用步骤 1.vscode安装Live Sass Compiler,由于该插件依赖Live Server ,所以会自动安装Live Server 2.点击vscode底部的Watch m ...

  8. 后台大哥请进一步:使用Visual Studio编译scss和souce map实现前后端的完美结合

    title: 后台大哥请进一步:使用Visual Studio编译scss和souce map实现前后端的完美结合 date: 2020-06-28 sidebarDepth: 2 tags: win ...

  9. webstorm配置scss自动编译路径

    webstorm支持sass的同步编译,也就是即写即编译,并且可以指定编译后的css的目录. 本文使用的webstorm为8.0版本 scss安装:http://www.w3cplus.com/sas ...

随机推荐

  1. iOS 标题内容待定

    UITableView: UITableViewCell的声明文件.所包含的: UIView控件(contentView,作为其它元素的父控件) -- 容器 两个UILabel控件( textLabe ...

  2. C++学习心得

    从大一的学习中,我了解到C++是兼容C的面向过程和面向对象的程序设计语言.其中,面向对象程序设计方法是以对象为模板的结构化程序设计方法,是对结构化程序设计方法的继承和发展.刚开始的学习让我觉得特别吃力 ...

  3. pivotx的entry和page内容里的日期格式修改

    欢迎转载opendevkit文章, 文章原始地址: http://www.opendevkit.com/?e=63 1. 文章发布时间的确定 如果服务器空间在国内还好说, 如果在国外的话, 文章编辑时 ...

  4. Select for update/lock in share mode 对事务并发性影响

    select for update/lock in share mode 对事务并发性影响 事务并发性理解 事务并发性,粗略的理解就是单位时间内能够执行的事务数量,常见的单位是 TPS( transa ...

  5. 升级ruby后再安装cocodPod

    1.移除现有的Ruby $gem sources --remove https://rubygems.org/ 2.使用淘宝镜像 $gem sources -a https://ruby.taobao ...

  6. centos 后台执行C#控制台程序

    1. nohup nohup 无疑是我们首先想到的办法.顾名思义,nohup 的用途就是让提交的命令忽略 hangup 信号.让我们先来看一下 nohup 的帮助信息: NOHUP() User Co ...

  7. 推荐几款自己写博客使用的Ubuntu软件

    使用Ubuntu桌面有段时间,到现在也写过几篇博客了,期间用到的几款好用的软件推荐给大家.1. 图片简单编辑软件gthumbubuntu默认提供shotwell查看图片,类似与windows的图片查看 ...

  8. 在线教学、视频会议 Webus Fox(1)文本、语音、视频聊天及电子白板基本用法

    Webus Fox是基于网页的在线教学.视频会议软件,不用安装,直接使用.它提供文本.语音.视频聊天,文件共享.电子白板等功能. 1. 登录 访问 http://flash.webus.cn/#,用自 ...

  9. ENode 1.0 - Command Service设计思路

    开源地址:https://github.com/tangxuehua/enode 上一篇文章,介绍了enode框架的物理部署思路.本文我们再简单分析一下Command Service的API设计: C ...

  10. 控件UI性能调优 -- SizeChanged不是万能的

    简介 我们在之前的“UWP控件开发——用NuGet包装自己的控件“一文中曾提到XAML的布局系统 和平时使用上的一些问题(重写Measure/Arrange还是使用SizeChanged?),这篇博文 ...