sass – scss – compass – susy2 – ruby – 解決中文註解發生錯誤

2014-11-20 / JSN / 5 Comments / 3,160 次瀏覽

2015/11/11 補充

新的 SASS/SCSS 不會有這個問題了。今天測試時不更改任何系統設定，就可以完成編譯有中文的文件。所以大家也把系統使用指令

npm update
npm clean

更新吧！這是我目前的版本

• ruby 2.1.5p273 (2014-11-13 version 48405)
• compass 1.0.3
• sass 3.4.19
• susy 2.2.6

直接修改 Ruby 設定

參考，可以到 Ruby 的安裝目錄，找到如我的『C:\Ruby21-x64\lib\ruby\gems\2.1.0\gems\sass-3.4.19\lib\sass.rb』，打開後，在所有 require 的最後一個後面，加入這行

require ...
require 'sass/features'

Encoding.default_external = Encoding.find('utf-8')    <----這行

再重新編譯即可。

如果使用compass 監控 scss 的時候噴出錯誤 Invalid CP950 character, 那就是因為Ruby的預設語言不認得UTF-8格式。有一陣子因為使用 fire.app 的關係就不會有UTF-8問題，但前兩天因為大量使用compass/css3, 在跑 fire.app 編譯速度太慢的問題，想說測試原生compass監控看會不會比較快，剛好就遇到這個問題。

參考了國外網站 ，只要在你的專案底下把設定檔 config.rb 打開，在最前端添加

Encoding.default_external = 'utf-8'

這樣重新 compass watch 就可以了。本來使用在scss最前方添加

@charset "UTF-8";

雖然也是可以解決噴錯誤的問題。但有一個缺點就是假設有兩支scss，裡面都有中文註解如

a.scss

@charset "UTF-8";

//中文註解
.container {
  font-family: "微軟正黑體";
  @import "b";　//若非得在使處引用_b.scss
}

 _b.scss

@charset "UTF-8";

.box {
  //中文註解
}

那就會噴出錯誤

Error: @charset may only be used at the root of a document.

告訴你 @charset 指令必須使用在檔案最前方。而因為_b.scss 不使用 @charset “UTF-8”;  會發生錯誤，所以還是建議改全域設定檔 config.rb 比較好。

若有配合使用 SUSY2，須要額外添加 require，可參考：sass – scss – compass – susy – windows 底下安裝