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. Windows下Oracle安装图解----oracle-win-64-11g 详细安装步骤

    一. Oracle 下载 官方下地址 http://www.oracle.com/technetwork/database/enterprise-edition/downloads/index.htm ...

  2. cobbler配置

    :ks脚本关闭pxe,这样就不会重复安装 sed -i 's/pxe_just_once: 0/pxe_just_once: 1/g' /etc/cobbler/settings 6:TFTP服务器 ...

  3. cefsharp开发实例1

    做了几年.NET开发,基本都是搞WEB居多,以前也搞过一个winform项目,虽然很把界面拼接出来了,但是感觉有点痛苦,改动的时候又要改动一大堆代码.最近又要搞个桌面软件,试着搜索了下html做界面方 ...

  4. 解决Ubuntu Server 12.04 在Hyper-v 2012 R2中不能使用动态内存的问题

    前言 全新Hyper-v 2012 R2终于开始支持在Linux的VPS中使用动态内存,可以大大优化服务器的资源分配,小弟我兴奋不已,于是抽空时间赶紧升级到 2012 R2,好好整理一番内存分配,不过 ...

  5. Linux下Crontab命令用法

    第1列分钟1-59第2列小时1-23(0表示子夜)第3列日1-31第4列月1-12第5列星期0-6(0表示星期天)第6列要运行的命令 下面是crontab的格式:分 时 日 月 星期 要运行的命令 这 ...

  6. CentOS7(mini) 急速部署ASP.NET应用

    从mono 2.8+的时候就开始关注linux运行.NET的一些消息 最近闲来无事,发现mono官方已经提供有编译好的源,极大便利了部署过程,不需要自己去编译mono了 用Nancy.Owin写了一个 ...

  7. Metrics-Java版的指标度量工具之二

    接上<Metrics-Java版的指标度量工具之一> 4.       Histograms Histograms主要使用来统计数据的分布情况,最大值.最小值.平均值.中位数,百分比(75 ...

  8. js for 循环中的 变量问题。

    今日处理项目中的一个循环,本来就是一个小小的for循环,后来发现该段程序出现了问题,仔细检查代码没有发现其中的错误.无奈只好叫来了老大帮忙.通过在模版中断点调试(该方式只能自己写debugger断点) ...

  9. 巧用JS内置对象Function

    在做练习的时候也好,做项目的时候也好,我经常会碰到想要的到一个字符串“”里面的东西的这样的需求. 注意,“”里面的东西可以是任何东西[],number等等 于是有了个大神教我一个绝招: 于是世界圆满了 ...

  10. Android Studio2.x版本无法自动关联源码的解决方法

    Android Studio2.x版本无法自动关联源码的解决方法 在学习android开发过程中,对于一个不熟悉的类,阅读源码是一个很好的学习方式,使用andorid studio开发工具的SDK M ...