在webstorm中配置sass的自动编译,并且可以指定编译后的css的目录
2017-06-07 11:07
1486 查看
本位借助UndefinedCheng大神,本人只是搬运工,为了方便以后快速查看
文章的出处:http://www.jianshu.com/writer#/notebooks/8901255/notes/8479561,但是点击是没有的
修正给出我找到的网页位置:http://www.jianshu.com/p/0fe52f149cab
本文前提是电脑里已经顺利安装了ruby,sass等之后,再进行webstorm中配置sass的watcher,以及改变watcher中的默认选项;如果以上都还没有做,可以自行百度解决,很容易找到的;
本文使用的webstorm为11.0版本
点击左上角的File→Settings→File Watchers
在弹窗的窗口的右上角点击绿色的 ‘+’ 号,然后选择scss
然后按照下图进行操作:
Watchers
其中黄色的地方都要填好,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编译不能带有中文,无论是路径名,文件名,文件里的内容,都不能识别中文,如果要修改它也不是不可以,但我觉得不用中文也挺好的,养成好习惯嘛.
文章的出处:http://www.jianshu.com/writer#/notebooks/8901255/notes/8479561,但是点击是没有的
修正给出我找到的网页位置:http://www.jianshu.com/p/0fe52f149cab
本文前提是电脑里已经顺利安装了ruby,sass等之后,再进行webstorm中配置sass的watcher,以及改变watcher中的默认选项;如果以上都还没有做,可以自行百度解决,很容易找到的;
webstorm支持sass的同步编译,也就是即写即编译,并且可以指定编译后的css的目录.
本文使用的webstorm为11.0版本点击左上角的File→Settings→File Watchers
在弹窗的窗口的右上角点击绿色的 ‘+’ 号,然后选择scss
然后按照下图进行操作:
Watchers
其中黄色的地方都要填好,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编译不能带有中文,无论是路径名,文件名,文件里的内容,都不能识别中文,如果要修改它也不是不可以,但我觉得不用中文也挺好的,养成好习惯嘛.
相关文章推荐
- webstorm配置编译sass的输出目录
- webstorm配置编译sass的输出目录
- webstorm设置sass自动编译,及参数配置
- webstorm配置编译sass的输出目录
- Nodejs,Grunt配置sass自动编译成css
- Re:从零开始的实习生活01----webstorm和intellij idea下如何自动编译sass和scss文件
- WebStorm 9 自动编译 LESS 产出 CSS 和 source maps
- webstorm scss编译css配置
- 虚拟机挂载到开发板的脚本文件,可以指定挂载目录,能自动设置开发板的ip
- 用webstorm自动编译less产出css和sourcemap
- centos6.5下LNMP配置(编译安装,指定目录)
- Webstorm配置SASS编译环境
- Nodejs+Grunt配置SASS项目自动编译
- 用webstorm自动编译less产出css和sourcemap
- 关于webStorm设置less自动编译css和sourcemap问题
- webstorm配置scss自动编译路径
- Nodejs+Grunt配置SASS项目自动编译
- MSTAR编译环境-启动cygwin后自动转到指定目录
- 控制Linux用户可以用ftp连接指定目录,并且不能用ssh连接
- PHP Strom 配置less 并设置编译后在远程开发模式下自动上传css文件