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

幾種模式效果如圖所示：

(本文來自網絡)