webstorm 配置scss编译环境简述

1.配置SCSS编译环境首先得安装Ruby,个人建议安装2.4版本的。安装完Ruby之后,先验证是否安装成功,Win+r快捷键启动cmd命令窗口,输入ruby -v,注意中间空格,显示版本号说明成功。

webstorm 配置scss编译环境简述

2.借助ruby安装sass,dos命令窗口输入“gem install sass”该命令一定要在system32文件下cmd.exe执行,默认安装目录在C:\Windows\System32\cmd.exe文件。安装过程中,耐心等待,直到提示安装进度100%。同样通过sass -v命令(中间有空格)检查安装结果,显示当前版本号。

3.配置webstorm下sass编译环境。打开webstorm创建空项目,点击“File”菜单选择“Setting--Tools--File Watcher,按下面图的顺序操作添加SCSS。

webstorm 配置scss编译环境简述

webstorm 配置scss编译环境简述

webstorm 配置scss编译环境简述

webstorm 配置scss编译环境简述

注意事项:在上面的操作中有可能在Ruby-bin目录下找不到scss.bat,此时可以考虑是否进行sass的安装,及第二步的操作。

以上就是webstorm 配置scss编译环境的过程了,希望对大家有所帮助哈。