webstorm 配置sass输出css文件格式配置

html-css07

webstorm 配置sass输出css文件格式配置,第1张

本文前提 是电脑里已经顺利安装了ruby,sass等之后，再进行webstorm中配置sass的watcher，以及改变watcher中的默认选项；如果以上都还没有做，可以自行百度解决，很容易找到的；

本文使用的webstorm为11.0版本

点击左上角的 *File→Settings→File Watchers ***

在弹窗的窗口的右上角点击绿色的 ‘+’ 号,然后选择scss

然后按照下图进行操作：

其中黄色的地方都要填好，program那里是你安装ruby中响应的scss.bat的路径，如果安装ruby时，你不是按照默认c盘路径按装的话，那么那里是需要需改的；

按道理其中只有两个地方是需要修改的,其他我没有改过,都是默认就是那样的 ：

1、Arguments:

可以配置编译后的文件的输出路径,我这里写的是:

--no-cache --update --sourcemap --watch : \css$FileNameWithoutExtension$.css

注意, 后面有个冒号,然后 表示的是 scss文件所在的文件夹的父级文件夹 ,而不是scss文件的父文件夹.

举个例子,我的项目叫lianxi,里面有个sass文件夹,里面存放scss文件,那么按照这样配置的结果, www.scss 所在的文件夹就是sass,sass的父文件夹就是lianxi,然后找到lianxi下的css文件夹,编译后的 www.css 文件就会在这里.

如图所示：

2、 Output paths to refresh:

改成这样: .css: .css.map

经过以上配置就实现了， webstorm支持sass的同步编译,也就是即写即编译,并且可以指定编译后的css的目录.

这里需要注意两点：

1》同步编译只能在项目文件夹下,也就是webstorm左侧打开的项目.随便打开一个项目外的文件是不行的.

2》这个和webstorm没有什么关系,就是sass编译不能带有中文,无论是路径名,文件名,文件里的内容,都不能识别中文,如果要修改它也不是不可以,但我觉得不用中文也挺好的,养成好习惯嘛.

原文网址摘自于 http://www.jianshu.com/writer#/notebooks/8901255/notes/8479561

1、线上的时候：在模板文件里对css跟js的引入路径后面追加一个类似于常量来做版本号

<link rel="stylesheet" href="style.css?version=20150828" />

2、线下测试的时候：对css跟js的引入路径后面追加随机数，时时刻刻更新，避免缓存影响了调试。

3、线下测试后：升级常量的版本号，把代码更新上去，这样用户的浏览器刷新就用到了新的样式，而又用到了缓存。

1、koala软件编译

2、sass命令：依靠环境。

自动编译命令：（编译单个文件/编译整个文件夹）

编译单个文件

sass文件目录 sass --watch scss文件的路径:css文件的路径 --style expanded

编译整个文件夹

sass文件目录 sass --watch scss文件夹/. : css文件夹/. --style expanded

3、gulp编译

4、hbulid编译

①　工具--预编译设置

②　新建一个预编译配置 .scss

③　输入触发命令的地址：ruby里面的sass.bat地址

④　命令参数：%FileName% ../css/%FileBaseName%.css