webstrom配置scss编译环境

之前没有用过scss来写样式,今天研究摸索了一天,最终在webstrom上面把配置弄好,可以顺利编写实现样式,实时解析成css了,写下来以便随时用到

1.下载安装ruby,安装的时候记得这两个勾选上,以便于在cmd中运行查看ruby -v的时候可以查询到,

2.在ruby -v可以查看版本以后 就可以安装sass了,gem install sass命令用这个,不过千万记住一定要在C:\Windows\System32这个文件夹下面安装(我是小白...我的问题来了,怎么从C:\Users\Administrater回到上面呢,'cd..'命令可以回到根目录)

3.等到gem install sass命令执行完安装好以后,可以查看一下sass -v 有版本出来的话说明已经安装成功啦,就可以进行下一步,在webstrom上面进行调试匹配

4.打开webstorm创建空项目，点击“File”菜单选择“Setting”找到点击最右边的'+'号选择相应的scss file弹出以下界面:

注意"program"这一项一定要在你安装ruby时bin文件里面的scss.bat,然后点击'ok'就大功告成了

5.不过注意的是:需要重启webstrom,在编译scss文档期间可以能遇到报错 

"Encoding::CompatibilityError: incompatible character encodings: GBK and UTF-8

  Use --trace for backtrace."

我百度了下解决方法,大部分都是告诉我在scss文档最开头最开头写@charset 'utf-8'就可以解决了,但是我要说------我加上了呀,怎么还错....后面又接着问度娘如何解决,最后看到一个很可能的问题,就是我的目录里面包含了中文....然后我把我正在写的文件单独提炼出来(前提是英文命名的),

但是!还是有问题

Error: Invalid GBK character "\xE5"         on line 4 of px2rem.scss         from line 2 of style.scss

,接着解决(本以为一帆风顺了可以愉快地敲代码了):

在安装ruby的文件里面找到engine.rb
C:\Ruby\lib\ruby\gems\2.3.0\gems\sass-3.4.24\lib\sass
在这个文件里面engine.rb，添加一行代码在一串串的红色require *** 等后面就行,目前为止
Encoding.default_external = Encoding.find('utf-8')

问题就解决了!(欢呼O(∩_∩)O~~)

webstrom配置less环境 收藏地址http://blog.csdn.net/xuanwuziyou/article/details/48132167