scss編譯異常

『壹』 webstorm sass編譯報錯。

1，加一句編碼，@charset "UTF-8"

8，如果scss文件中帶中文會報錯，解決方法如上圖中第一行添加 @charset "UTF-8"

『貳』 webstorm 編譯 scss 文件報錯

打開webstorm創建空項目，點擊「File」菜單選擇「Setting」，搜索「watcher」關鍵字，

點擊右邊綠色加號，選擇「SCSS」文件類型。

輸入監視文件類型名稱(隨便寫)，關鍵第二個選項，一定要選擇ruby安裝目錄bin文件下的scss.bat文件

最後，創建.scss文件輸入scss css代碼，保存後會生成後綴.css文件，就可以了。

『叄』 webstorm 配置sass輸出css文件格式配置

本文前提 是電腦里已經順利安裝了ruby,sass等之後，再進行webstorm中配置sass的watcher，以及改變watcher中的默認選項；如果以上都還沒有做，可以自行網路解決，很容易找到的；

本文使用的webstorm為11.0版本

點擊左上角的 *File→Settings→File Watchers ***

在彈窗的窗口的右上角點擊綠色的 『+』 號,然後選擇scss

然後按照下圖進行操作：

其中黃色的地方都要填好，program那裡是你安裝ruby中響應的scss.bat的路徑，如果安裝ruby時，你不是按照默認c盤路徑按裝的話，那麼那裡是需要需改的；

按道理其中只有兩個地方是需要修改的,其他我沒有改過,都是默認就是那樣的 ：

1、Arguments:

可以配置編譯後的文件的輸出路徑,我這里寫的是:

--no-cache --update --sourcemap --watch : css$FileNameWithoutExtension$.css

注意, 後面有個冒號,然後 表示的是 scss文件所在的文件夾的父級文件夾 ,而不是scss文件的父文件夾.

舉個例子,我的項目叫lianxi,裡面有個sass文件夾,裡面存放scss文件,那麼按照這樣配置的結果, www.scss 所在的文件夾就是sass,sass的父文件夾就是lianxi,然後找到lianxi下的css文件夾,編譯後的 www.css 文件就會在這里.

如圖所示：

2、 Output paths to refresh:

改成這樣: .css: .css.map

經過以上配置就實現了， webstorm支持sass的同步編譯,也就是即寫即編譯,並且可以指定編譯後的css的目錄.

這里需要注意兩點：

1》同步編譯只能在項目文件夾下,也就是webstorm左側打開的項目.隨便打開一個項目外的文件是不行的.

2》這個和webstorm沒有什麼關系,就是sass編譯不能帶有中文,無論是路徑名,文件名,文件里的內容,都不能識別中文,如果要修改它也不是不可以,但我覺得不用中文也挺好的,養成好習慣嘛.

原文網址摘自於 http://www.jianshu.com/writer#/notebooks/8901255/notes/8479561