在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
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。
转载于:https://www.cnblogs.com/jeacy/p/9779004.html
在webstorm中配置sass的自动编译，并且可以指定编译后的css的目录.相关推荐
- idea中配置xml不自动提示解决方案
idea中配置xml不自动提示解决方案 参考文章: (1)idea中配置xml不自动提示解决方案 (2)https://www.cnblogs.com/appium/p/10708986.html 备 ...
- 在Webstorm中配置Compass Watcher
2019独角兽企业重金招聘Python工程师标准>>> 结合Webstorm和Compass,完成自动编译Scss文件为css,做个简单的记录. 1 首先用 webstorm 打开创 ...
- webstorm中配置svn
http://blog.csdn.net/hysh_keystone/article/details/52013789 Webstorm2016使用技巧--SVN插件使用 分类:Webstorm (5 ...
- vue-cli中配置sass
主要有三个步骤 步骤1 1 2 npm install node-sass --save-dev npm install sass-loader --save-dev 步骤2 打开webpack.ba ...
- webstorm中配置vue代码片段
ctrl+shift+A 输入live 上述红框插入一下代码:<template> #[[$END$]]# </template><script> export d ...
- 在eclipse中配置android ndk的自动编译环境builders
无论linux还是mac在jni目录中直接运行 ndk-build 就可以生成 lib目录及所需要的 so文件: windows 装上lnx模拟器也是一样: 每次修改完 c++代码, 都要运行一下 ...
- webstorm配置环境变量_webstorm中配置nodejs环境及npm步骤详细解说
这次给大家带来webstorm中配置nodejs环境及npm步骤详解,webstorm中配置nodejs环境及npm的注意事项有哪些,下面就是实战案例,一起来看一下. --nodejs安装及环境配置 ...
- 在webstorm中怎么配置本地服务器
前端IDE有挺多的,比如Dreamwear,Hbuilder,Webstorm:还有许多纯文本编辑器.不过我还是比较喜欢Webstorm.因为webstorm自带了一个本地服务器.如果你把项目放到本地 ...
- myeclipse中配置weblogic的开发环境
1. Window(窗口)---> Preferences(首选项)---> MyEclipse ---> Application Servers(应用服务器)---> We ...
最新文章
- linux 新建用户（添加ssh用户两者方式一样）
- 我犯的错误--关于主键
- python做请求转发_RequestDispatcher实现请求转发
- 在docker中运行ASP.NET Core Web API应用程序
- NLP︱高级词向量表达（一）——GloVe（理论、相关测评结果、Rpython实现、相关应用）
- CF620E New Year Tree
- python面试专题--with 关键字与上下文管理
- html隐藏图片白色部分,css去掉gif透明图片的白边
- 漏洞挖掘分析技术总结
- Android studio开发app实现仿微信滑动切换界面
- java 内存不能为,内存不能为written修复工具-内存不能为written修复工具 免费版
- 平板游戏交互式设计的10大规则
- 分享雷军二十年前写的代码，全部都是汇编，来看看雷军的编程水平吧。
- 职场中该如何自学？看书/看视频
- 苹果拼图软件测试,视频照片拼图APP
- 模仿blblblbl登录页面
- ISCC2021 wp
- inurl+:php?id,实操：SQL注入国外xx网站
- 微信群超好用的红包抽奖小程序
- hadoop之hdfs命令