在webstorm中配置sass的自动编译,并且可以指定编译后的css的目录.
参考:
作者:tobyDing
链接:https://www.jianshu.com/p/0fe52f149cab
來源:简书
本文前提是电脑里已经顺利安装了ruby,sass等之后,再进行webstorm中配置sass的watcher,以及改变watcher中的默认选项;如果以上都还没有做,可以自行百度解决,很容易找到的;
webstorm支持sass的同步编译,也就是即写即编译,并且可以指定编译后的css的目录.
本文使用的webstorm为11.0版本
点击左上角的File→Settings→File Watchers
在弹窗的窗口的右上角点击绿色的 ‘+’ 号,然后选择scss
然后按照下图进行操作:
其中黄色的地方都要填好,program那里是你安装ruby中响应的scss.bat的路径,如果安装ruby时,你不是按照默认c盘路径按装的话,那么那里是需要需改的;
按道理其中只有两个地方是需要修改的,其他我没有改过,都是默认就是那样的:
1、Arguments:
可以配置编译后的文件的输出路径,我这里写的是:
--no-cache --update --sourcemap --watch $FileName$:$FileParentDir$\css\$FileNameWithoutExtension$.css
注意,$FileName$后面有个冒号,然后$FileParentDir$表示的是scss文件所在的文件夹的父级文件夹,而不是scss文件的父文件夹.
举个例子,我的项目叫lianxi,里面有个sass文件夹,里面存放scss文件,那么按照这样配置的结果,www.scss所在的文件夹就是sass,sass的父文件夹就是lianxi,然后找到lianxi下的css文件夹,编译后的www.css文件就会在这里.
如图所示:
2、Output paths to refresh:
改成这样:$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map
经过以上配置就实现了,webstorm支持sass的同步编译,也就是即写即编译,并且可以指定编译后的css的目录.
这里需要注意两点:
1》同步编译只能在项目文件夹下,也就是webstorm左侧打开的项目.随便打开一个项目外的文件是不行的.
2》这个和webstorm没有什么关系,就是sass编译不能带有中文,无论是路径名,文件名,文件里的内容,都不能识别中文,如果要修改它也不是不可以,但我觉得不用中文也挺好的,养成好习惯嘛.
由于本人水平有限,时间仓促,疏漏之处在所难免,望读者包容!
不喜勿喷!
本文为UndefinedCheng原创文章,如想转载,请注明原文网址摘自于http://www.jianshu.com/writer#/notebooks/8901255/notes/8479561,注明出处;
否则,禁止转载;谢谢配合!
作者:tobyDing
链接:https://www.jianshu.com/p/0fe52f149cab
來源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。
在webstorm中配置sass的自动编译,并且可以指定编译后的css的目录.的更多相关文章
- 在webstorm中配置sass环境
最近开始用SASS,LESS等来写CSS,而在Webstorm中,它自带一个File Watchers功能,设置一下,即可实时编译SASS,LESS等. LESS的实时编译很简单,在node平台安装一 ...
- Nodejs+Grunt配置SASS项目自动编译
Nodejs+Grunt配置SASS项目自动编译 早前听说Nodejs和Grunt很强大,特别是用来构建自动化的前端开发,更是强大无比.但一直碍于自己掌握的技术有限,不敢深入,也未曾深入下去.最近在开 ...
- 【已解决】React中配置Sass引入.scss文件无效
React中配置Sass引入.scss文件无效 在react中使用sass时,引入.scss文件失效 尝试很多方法没法解决,最终找到解决方法,希望能帮助正在坑里挣扎的筒子~ 在node_modules ...
- webstorm中使用sass
最近由原来的sublime转为使用webstorm,用的不是很熟.我们在webstorm中使用sass 1.首先sass是基于ruby的.这个时候我们需要安装ruby. 2.安装成功后.我们需要去掉原 ...
- WebStorm中配置node.js(Windows)
WebStorm中配置node.js(Windows) 一.node 1.下载安装包 32 位 : https://nodejs.org/dist/v4.4.3/node-v4.4.3-x86.msi ...
- create-react-app脚手架中配置sass
本文介绍如何在react中配置sass 首先将你的文件名称改成scss结尾的文件 然后安装依赖 cnpm install sass-loader node-sass --save-dev 找到node ...
- React中配置Sass引入.scss文件无效
React中配置Sass引入.scss文件无效 在react中使用sass时,引入.scss文件失效尝试很多方法没法解决,最终找到解决方法,希望能帮助正在坑里挣扎的筒子~ 在node_modules文 ...
- sublimeText3 中配置sass环境,并将编译后文件保存到指定文件夹
sass基于ruby引擎,所以安装时ass.compass之前需要安装ruby.具体的链接应该是(http://rubyinstaller.org/downloads).下载并安装相应的版本,勾选第二 ...
- stylus入门教程,在webstorm中配置stylus
转载:https://www.cnblogs.com/wenqiangit/p/9717715.html#undefined stylus特点 富于表现力.具有健壮性.功能丰富.动态编码 不需要写 ...
随机推荐
- 输入参数的默认值设定${3:-var_d}
今天看到一个不一样的写法: if [ $# != 2 ] && [ $# != 3 ] ; then #判断参数个数 echo "Invalid Args" ...
- Redis和mysql数据怎么保持数据一致的?
需求起因 在高并发的业务场景下,数据库大多数情况都是用户并发访问最薄弱的环节.所以,就需要使用redis做一个缓冲操作,让请求先访问到redis,而不是直接访问MySQL等数据库. 这个业务场景, ...
- python虚拟环境迁移
python虚拟环境迁移: 注意事项:直接将虚拟环境复制到另一台机器,直接执行是会有问题的. 那么可以采用以下办法: 思路:将机器1虚拟环境下的包信息打包,之后到机器2上进行安装: (有两种情况要考虑 ...
- myeclipse2017下载安装与破解详细教程
下载myeclipse2017百度云下载路径: 链接:https://pan.baidu.com/s/1wQYwO2zrUvbbUcjCB5B8IQ 密码:6igu myeclipse2017破解文件 ...
- python编写接口初识一
python编写接口这里用到的是他一个比较轻量级的框架 flask #!/usr/bin/python # -*- coding: UTF-8 -*- import flask,json server ...
- HDU 2196树形DP(2个方向)
HDU 2196 [题目链接]HDU 2196 [题目类型]树形DP(2个方向) &题意: 题意是求树中每个点到所有叶子节点的距离的最大值是多少. &题解: 2次dfs,先把子树的最大 ...
- Vue.js新城之勇者探秘录
那么我们就继续来聊聊学习Vue的一些方法?以下的学习思路可以供大家作为参考: 1.视频教程带你入门:初学者如果没有MVVM模式的基础学习Vue,可能初期切换思路有比较大的难度,这个时候可以借助视频教程 ...
- 安装linux虚拟机
虚拟机安装流程 1. 安装系统 安装完成 2. 安装VMware tools linux(ubuntu 18.04 Desktop) 手动安装 1) 加载光驱 2) 双击进入光驱,在光驱的目录下,打开 ...
- CentOS 7 FTP环境部署
FTP协议有两种工作方式: 1)port方式:主动模式 port(主动)方式的连接过程是:客户端向服务器的FTP端口(默认是21)发送连接请求 , 服务器接受连接 , 建立一条命令链路 当需要传送数据 ...
- u盘安装centos7.6 最新版本
1,可以按照网上的教程,制作u盘启动 2,然后将u盘插入主机,最重要的是这一步,网上的说法基本上适用这个版本 进入到这个界面: 然后选择Install Centos 7,然后按e键,tab是不管用的 ...