WebStorm 9 自动编译 SCSS 产出 CSS 和 source maps
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的更多相关文章
- WebStorm 9 自动编译 LESS 产出 CSS 和 source maps
1.双击桌面Chrome图标,打开Chrome,按键盘“F12”键,打开开发工具界面,点击其右上角的“设置”按钮,勾选“Enable JavaScript source maps” 及“Enable ...
- 用webstorm自动编译less产出css和sourcemap
css产出sourcemap有什么用呢,可能大家要问这个问题了. 请移步这里 https://developers.google.com/chrome-developer-tools/docs/css ...
- [less]用webstorm自动编译less产出css和sourcemap
css产出sourcemap有什么用呢,可能大家要问这个问题了. 请移步这里 https://developers.google.com/chrome-developer-tools/docs/css ...
- 使用VS Code开发纸壳CMS自动编译主题压缩CSS,JS
Visual Studio Code (简称 VS Code / VSC) 是一款免费开源的现代化轻量级代码编辑器,支持语法高亮.智能代码补全.自定义热键.括号匹配.代码片段.代码对比 Diff.GI ...
- 让webStorm支持自动监听编译scss文件
前提概要 今日,重装了两波系统,,,之前安装的各种环境都忘光了,重新又踩一次坑的感觉很不舒服,所以记录一下配置自动编译scss一路遇到的坑 一.webstrom run的时候控制台输出的错误中文提示乱 ...
- webstorm 设置 sass自动编译问题
sass语法.使用它带来的好处,就不再这里做介绍了,主要看怎么在webstorm里配置自动编译. sass编译是需要Ruby环境的,可以到这里去下载 : https://rubyinstaller ...
- vscode--搭建自动编译sass环境
一,安装插件及使用步骤 1.vscode安装Live Sass Compiler,由于该插件依赖Live Server ,所以会自动安装Live Server 2.点击vscode底部的Watch m ...
- 后台大哥请进一步:使用Visual Studio编译scss和souce map实现前后端的完美结合
title: 后台大哥请进一步:使用Visual Studio编译scss和souce map实现前后端的完美结合 date: 2020-06-28 sidebarDepth: 2 tags: win ...
- webstorm配置scss自动编译路径
webstorm支持sass的同步编译,也就是即写即编译,并且可以指定编译后的css的目录. 本文使用的webstorm为8.0版本 scss安装:http://www.w3cplus.com/sas ...
随机推荐
- Linux环境变量配置
/etc/profile:此文件为系统的每个用户设置环境信息,当用户第一次登录时,该文件被执行.并从/etc/profile.d目录的配置文件中搜集shell的设置./etc/bashrc:为每一个运 ...
- iOS 里面 NSTimer 防止 循环引用
使用NSTimer的类 #import "TBTimerTestObject.h" #import "TBWeakTimerTarget.h" @interfa ...
- Asp.net MVC4 与 Web Form 并存
Web Forms 与 MVC 的asp.net 基础架构是相同的.MVC 的路由机制并不只MVC 特有的,它与WebForm 也是共享相同的路由机制.Web Forms 的Http请求针 ...
- 苹果全新 Mac OS X 系统开放下载
在今天的发布会上,苹果除了发布多款硬件产品之外,还更新了Mac OS X Mavericks(小牛)系统,作为重大改变,这一Mac系统将从今天起开始免费升级. 升级后的Mavericks系统将进一步与 ...
- TypeScript之接口类型
Interfaces 作为TypeScript中的核心特色之一,能够让类型检查帮助我们知道一个对象应该有什么,相比我们在编写JavaScript的时候经常遇到函数需要传递参数,可能在编写的时候知道这个 ...
- Linux 网络编程(UDP)
客户端代码 #include<stdio.h> #include<stdlib.h> #include<string.h> #include<sys/sock ...
- Java多线程11:ReentrantLock的使用和Condition
ReentrantLock ReentrantLock,一个可重入的互斥锁,它具有与使用synchronized方法和语句所访问的隐式监视器锁相同的一些基本行为和语义,但功能更强大. Reentran ...
- Asp.Net MVC 扩展 Html.ImageFor 方法详解
背景: 在Asp.net MVC中定义模型的时候,DataType有DataType.ImageUrl这个类型,但htmlhelper却无法输出一个img,当用脚手架自动生成一些form或表格的时候, ...
- 使用canvas检测HTML5视频解码错误
乍一看这标题,有点吊炸天的赶脚,canvas跟<video>能有什么联系?不过请放心我不是标题党.事情是这样的: HTML5的<video>标签所支持的视频格式确实有限,mp4 ...
- Linux C/C++的编译
以前在Linux上面编译过C,但是没有编译过C++,今天用到了,就稍微学习了一下. 简单的介绍 linux 中最重要的编译工具是 GCC.GCC 是 GNU 的 C 和 C++ 编译器.实际上,GCC ...