webstorm下SCSS自动生成文件配置

第一步：安装ruby环境并使用gem install sass 安装sass（国内访问较慢），如果安装不成功可以更换源路径

更换方式：

gem sources --remove https://rubygems.org/  

gem source -a http://ruby.taobao.org  

gem install sass 

或者更换成：

gem sources -a http://gems.ruby-china.org

第二步：在WebStrom编辑器中选择File->Settings->File Watchers添加SCSS配置项

第三步：修改下面两个地方：

'Arguments': --no-cache --update --sourcemap --watch $FileName$:$FileNameWithoutExtension$.css

另一处：'Output paths to refresh': $FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map

修改完保存，现在新建'style.scss'后就会自动生成'style.css'和'style.css.map'

 

碰到的问题以及解决方法：

问题1：如果想把SCSS源文件与生成后的CSS和map文件分开目录，则如下设置：

'Arguments': --no-cache --update --sourcemap --watch $FileName$:$FileParentDir$\css\$FileNameWithoutExtension$.css

问题2：如果编译不了，并出现乱码问题：

找到ruby的安装目录并找到sass模块，修改文件目录下的 （C:/Ruby/lib/ruby/gems/1.9.1/gems/sass-3.3.14/lib/sass ）
engine.rb这个文件，在所有的require XXXX 之后添加Encoding.default_external = Encoding.find('utf-8')即可 。

问题3：默认生成的csss是nested模式的，如果想换成其他模式（expanded、compact、compressed）怎么换？

Arguments:--no-cache --update --sourcemap --watch $FileName$:$FileParentDir$\css\$FileNameWithoutExtension$.css --style compact

几种模式效果如图所示：

(本文来自网络)