2014年11月30日 星期日

Webstorm 編譯Sass


一、安裝Ruby Installer: http://rubyinstaller.org/downloads/


二、檢查是否安裝成功:cmd->gem -v

三、安裝sass:cmd->gem install sass

四、Webstorm內配置Sass編譯

      1.Webstorm->File->Settings->Tools->File Watchers
 2.Watcher settings:
          (1)Program:sassPath/sass.bat
          (2)Arguments:「--no-cache --sourcemap $FileName$:$FileParentDir$\css\$FileNameWithoutExtension$.css」,在指定的目錄下生成css、map文件,目錄如下:
 (3)Output paths to refresh:可不填,因為開啟sass.bat已經設定檔案位置參數。

五、補充Webstorm中設定File Watchers是當檔案中有任何改變時就去編譯它,那如果我們要主動去編譯的話可以使用以下設定。

     1.Webstorm->File->Settings->Tools->External Tools->+
2.settings:
              (1)Program:sass安裝的目錄sass.bat
              (2)Parameters:「--no-cache --sourcemap $FileName$:$FileParentDir$\css\$FileNameWithoutExtension$.css
              (3)Working directory:$FileDir$//目前檔案的目錄。
          3.在要編譯的檔案按下右鍵,就可主動去編譯,而編譯出來的css

沒有留言:

張貼留言