Question

webstorm怎么编译sass

Answer 1

1、下载ruby最新版2.1.5，安全起见可以安装ruby 1.9.3-p551
ruby安装文件自己百度一下，容易找到。
2、安装过程中，一定注意勾选第二项！否则cmd命令会找不到。
webstorm 配置scss编译环境
3、安装完后，检查是否安装成功
Win+r快捷键启动cmd命令窗口，输入ruby -v，注意中间空格，显示版本号说明成功。
webstorm 配置scss编译环境
4、借助ruby安装sass，dos命令窗口输入“gem install sass”
该命令一定要在system32文件下cmd.exe执行，默认安装目录在C:\Windows\System32\cmd.exe文件
webstorm 配置scss编译环境
5、安装过程中，耐心等待，直到提示安装进度100%。
同样通过“sass -v”命令(中间有空格)检查安装结果，显示当前版本号。
webstorm 配置scss编译环境
6、接着需要配置webstorm下sass编译环境。
打开webstorm创建空项目，点击“File”菜单选择“Setting”，搜索“watcher”关键字，
webstorm 配置scss编译环境
webstorm 配置scss编译环境
7、点击右边绿色加号，选择“SCSS”文件类型。
webstorm 配置scss编译环境
8、输入监视文件类型名称(随便写)，关键第二个选项，一定要选择ruby安装目录bin文件下的scss.bat文件
webstorm 配置scss编译环境
webstorm 配置scss编译环境
9、最后，创建.scss文件输入scss css代码，保存后会生成后缀.css文件，说明环境编译没问题。
webstorm 配置scss编译环境