webstorm下的sass自动编译

By柏小白

webstorm下的sass自动编译

1、安装Ruby

2、安装sass

3、webstorm配置file watcher

4、移动端自适应

1、安装Ruby

1

安装Ruby,有多种方式,打开官网下载

因为,使用的是window选择RubyInstall,下载地址  https://rubyinstaller.org/downloads/

2

RubyInstall下载地址

3

选择对应系统的版本,下载完成,安装

4

添加到path,建议勾上,安装完成后,打开开始面板,会有一个Start Command Prompt with Ruby,命令行工具。

安装完毕后打开cmd,输入:$ ruby -v显示如下说明ruby安装成功:

使用RubyInstaller的同时也安装了rubyGems,我们测试下gem是否安装成功:

2、安装sass

个人偏好sass,也可以选择less或stylus,打开上一步安装的Ruby命令行

5

输入gem list 看一下安装了那些包,接着gem install sass

6

3、webstorm配置file watcher

打开webstorm,File -> settings -> Tools -> File Watchers

7

选择+号,新建scss

8

在输出参数位置,一般会加上–style *;展开格式nestedexpandedcompactcompressed,最传统的选择--style expanded,括号上下换行

工作文件夹和输出位置,可以根据项目来选择,放在同级目录,或者父级,点击insert macros

常见的有文件路径,父文件路径等等,可以自己尝试下,加深理解

 

 

备注:

ruby环境sass编译中文出现Syntax error: Invalid GBK character错误解决方法

sass文件编译时候使用ruby环境,无论是界面化的koala工具还是命令行模式的都无法通过,真是令人烦恼。

容易出现中文注释时候无法编译通过,或者出现乱码,找了几天的解决方法终于解决了。

这个问题的奇葩之处在于在xp环境中没有任何问题,只是在windows7环境中才出现的这个。

sass编译时候出现如下错误的解决方法:

Syntax error: Invalid GBK character "\xE5"
        on line 8 of E:\work\sass\sass\_big_box.scss
        from line 16 of E:\work\sass\sass\main.scss
  Use --trace for backtrace.

或者

Syntax error: Invalid GBK character "\xE5"
        on line 2 of E:\work\sass\sass\main.scss
  Use --trace for backtrace.

 

解决办法:

1.koala可视化编译工具,

找到安装目录里面sass-3.3.7模块下面的engine.rb文件,例如下面路径:

C:\Program Files (x86)\Koala\rubygems\gems\sass-3.3.7\lib\sass

在这个文件里面engine.rb,添加一行代码

Encoding.default_external = Encoding.find('utf-8')

放在所有的require XXXX 之后即可。

2.命令行工具同理

找到ruby的安装目录,里面也有sass模块,如这个路径:

C:\Ruby\lib\ruby\gems\1.9.1\gems\sass-3.3.14\lib\sass

在这个文件里面engine.rb,添加一行代码(同方法1)

Encoding.default_external = Encoding.find('utf-8')

放在所有的require XXXX 之后即可。

3. 自动缓存 .sass-cache 文件关闭

默认情况下,Sass 会自动缓存编译后的模板(template)与 partials,这样做能够显著提升重新编译的速度,在处理 Sass 模板被切割为多个文件并通过 @import 导入,形成一个大文件时效果尤其显著。

如果不使用框架的情况下,Sass 将会把缓存的模板放入 .sass-cache 目录。

在 Rails 和 Merb 中,缓存的模板将被放到tmp/sass-cache 目录。

此目录可以通过:cache_location 选项进行自定义。

如果你不希望 Sass 启用缓存功能,

修改相关路径  C:\Ruby23-x64\lib\ruby\gems\2.3.0\gems\sass-3.7.3\lib\sass\engine.rb

:cache => true, 选项设置为 :cache => false

 

 

About the author

柏小白 administrator

Leave a Reply