Question

webstorm 怎么添加scss

Answer 1

1、下载ruby最新版2.1.5，安全起见可以安装ruby 1.9.3-p551
ruby安装文件自己百度一下，容易找到。
2、安装过程中，一定注意勾选第二项！否则cmd命令会找不到。

3、安装完后，检查是否安装成功
Win+r快捷键启动cmd命令窗口，输入ruby -v，注意中间空格，显示版本号说明成功。

4、借助ruby安装sass，dos命令窗口输入“gem install sass”
该命令一定要在system32文件下cmd.exe执行，默认安装目录在C:\Windows\System32\cmd.exe文件

5、安装过程中，耐心等待，直到提示安装进度100%。
同样通过“sass -v”命令(中间有空格)检查安装结果，显示当前版本号。

6、接着需要配置webstorm下sass编译环境。
打开webstorm创建空项目，点击“File”菜单选择“Setting”，搜索“watcher”关键字，

7、点击右边绿色加号，选择“SCSS”文件类型。

8、输入监视文件类型名称(随便写)，关键第二个选项，一定要选择ruby安装目录bin文件下的scss.bat文件

9、最后，创建.scss文件输入scss css代码，保存后会生成后缀.css文件，说明环境编译没问题。

Answer 2

webstorm安装sass插件，使webstorm自动编译sass文件，然后再

打开设置窗口- >file Watchers- >右边的绿色加号- >scss，点击ok即可完成scss文件的时时编译。
接下来配置：
时时生成css和css.map文件
在'Arguments':--no-cache --update $FileName$:$FileNameWithoutExtension$.css中添加 --sourcemap --watch
即：--no-cache --update --sourcemap --watch $FileName$:$FileNameWithoutExtension$.css
在'Output paths to refresh':$FileNameWithoutExtension$.css后面添加:$FileNameWithoutExtension$.css.map
即：$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map
单击ok，此时时时编译后会产生.css文件和.css.map两个文件，默认是生成.css一个文件。
最后配置：
修改生成文件位置
在 'Arguments'中的 $FileName$:后面和$FileNameWithoutExtension$.css前面添加配置路径
例--no-cache --update --sourcemap --watch $FileName$:$FileParentDir$css$FileNameWithoutExtension$.css
这是在scss文件所在目录的父级目录下的css文件夹放置生成文件，其中的$FileParentDir$代表当前文件夹得父级文件夹。