webstorm配置scss自动编译路径
webstorm支持sass的同步编译,也就是即写即编译,并且可以指定编译后的css的目录.
本文使用的webstorm为8.0版本
scss安装:http://www.w3cplus.com/sassguide/install.html
打开webstorm:
点击左上角的File
→Settings
→File Watchers
在弹窗的窗口的右上角点击绿色的 ‘+’ 号,然后选择scss
-------------------------------------------------------------------------------
Arguments:
可以配置编译后的文件的输出路径,我这里写的是:
--no-cache --update --sourcemap --watch $FileName$:$FileParentDir$\css\$FileNameWithoutExtension$.css
注意, $FileName$
后面有个冒号,然后$FileParentDir$
表示的是scss文件所在的文件夹的父级文件夹,而不是scss文件的父文件夹.
举个栗子,我的项目叫sass-learn
,里面有个scss文件夹,里面存放scss文件,那么按照这样配置的结果,style.scss所在的文件夹就是scss,scss的父文件夹就是sass-learn,然后找到sass-learn下的css文件夹,编译后的style.css文件就会在这里.
---------------------------------------------------------------------------------
Output paths to refresh:
改成这样:$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map
在使用的过程中还有两点需要注意:
1.同步编译只能在项目文件夹下,也就是webstorm左侧打开的项目.随便打开一个项目外的文件是不行的.
2.这个和webstorm没有什么关系,就是sass编译不能带有中文,无论是路径名,文件名,文件里的内容,都不能识别中文,如果要修改它也不是不可以,但我觉得不用中文也挺好的,养成好习惯嘛.
webstorm配置scss自动编译路径的更多相关文章
- webstorm 设置 sass自动编译问题
sass语法.使用它带来的好处,就不再这里做介绍了,主要看怎么在webstorm里配置自动编译. sass编译是需要Ruby环境的,可以到这里去下载 : https://rubyinstaller ...
- idea配置less自动编译
参考: idea配置less自动编译 1. 电脑安装node.js环境: window下直接上官网下载node.msi文件下载安装即可 安装完成后在命令行执行如下命令表明安装成功 npm -v nod ...
- ruby安装及webStorm配置SCSS
sass安装: 步骤:(window系统) 1.下载RubyInstaller(v2.4.3),运行安装,基本直接next安装,不过有个add to PATH的选项一定要勾选,这样就不用配置环境变量. ...
- webstorm配置scss的小结
1)安装ruby 2)安装sass 3)配置webstorm 打开webstrom ->file->setting->Tools->file watcher 添加scss pr ...
- webstorm 配置scss的问题
第一种方法(ruby方法) 先安装ruby,在windows/system32目录下 1.先查询源是什么 gem sources 2.移除原有的源头 gem sources -r http://xxx ...
- webstorm配置scss环境
1.下载 Ruby (安装过程中记得勾选添加到环境变量,安装结束最后可能会弹出一个cmd弹框,可以忽略) 2. cmd安装sass gem install sass 3. cmd检查是否安装 sas ...
- webstorm配置babel自动转译es6的方法
1.npm安装babel npm install -g babel-cli 2.npm安装Babel的preset npm install --save-dev babel-preset-es2015 ...
- 配置Eclipse自动编译NDK/JNI
Eclipse关联ndk-build(自建Builder方法) 1. Project->Properties->Builders->New,新建一个Builder 2. 参数配置 ...
- webstorm 配置node babel编译es6
随机推荐
- cf558c(bfs)
C. Amr and Chemistry time limit per test 1 second memory limit per test 256 megabytes input standard ...
- 【PHP面向对象(OOP)编程入门教程】18.__call()处理调用错误
在程序开发中,如果在使用对象调用对象内部方法时候,调用的这个方法不存在那么程序就会出错,然后程序退出不能继续执行.那么可不可以在程序调用对象内部 不存在的方法时,提示我们调用的方法及使用的参数不存在, ...
- OpenCv高斯,中值,均值,双边滤波
#include "cv.h" #include "highgui.h" #include <iostream> using namespace s ...
- python 字节与字符串转换
name = 'laogaoyang' nameBytes = name.encode('utf-8') # 字节 nameStr = nameBytes.decode('utf-8')# 字符串 p ...
- ADB连不上,ADB server didn't ACK问题,的解决
adb连接不上虚拟机,即便执行了adb kill-server命令也没用? 如果你的错误信息是,ADB server didn't ACK这样的话,说明5037端口被占用了. 只要找出占用此端口的进程 ...
- centos7 关闭firewall安装iptables并配置
一.配置防火墙,开启80端口.3306端口 CentOS 7.0默认使用的是firewall作为防火墙,这里改为iptables防火墙. 1.关闭firewall: systemctl stop fi ...
- 如何用极路由+OpenWrt+RTL电视棒搭建一台SDR服务器,并隐秘地捕获和传输数据
0×00 前言 近期因为有个从异地捕获无线信号的需求,便尝试着用OpenWrt+公网IP搭建了一台SDR服务器.如果有小伙伴嫌SDR硬件天线看起来太乱.或者电脑没有足够的USB接口也可在局域网搭建SD ...
- 用消息机制解耦Activity跳转
我见过的Activity方式有三种: 1, 默认的,在一个Activity里创建一个Intent,然后startActivity/startActivityForResult: 2, 给被跳转到的Ac ...
- 2 GPS utility methods
Methond 1 is to check whether the GPS is on: 1 2 3 4 5 public boolean isGPSIsOn() { LocationManager ...
- Servlet的使用方法详细说明
Servlet的生命周期方法: init() destroy() doGet(HttpServletRequest request,HttpServletResponse response) 客户端请 ...