SCSSを使い始めたころ、「Error: Invalid US-ASCII character "xE3"」 とかいうエラーが出まくったことがあります(Dreamweaver CC使用時)。
ちなみに、Sublime Text（コンパイルはKoalaを使用）では以下のようなエラーメッセージになります。
Encoding::CompatibilityError: incompatible character encodings: Windows-31J and ASCII-8BIT
日本語を入力した部分でエンコードがどうのこうの言われているっぽいから、エンコードがうまくいっていないのだろうと思い、Sublime Textのエンコード機能やターミナルでエンコードし直しても同じエラーが出てくる。
どうなってんだともうちょっと調べてみたところ、このエラーは
@charset "UTF-8";
という記述がファイルの1行目にないと発生するようです( "UTF-8" の部分は任意のエンコード指定 )。
真っ先にエンコードを記述するのは当たり前じゃん、なんで先に書いてないの？と思われるかもしれません。自分でも思いました。
しかし、実は愛用しているDreamweaverに思わぬ落とし穴があったのです。
DreamweaverでSCSSファイルを新規作成すると、自動で以下の文章が記述された状態でファイルが開きます。
/* Scss Document */はい、犯人を発見しました。こいつのせいだったんです。
何も考えずにこの下から@charsetを記述するとアウトになります。
/* Scss Document */
@charset "UTF-8";
エラーになるような記述を勝手に入れないでほしい…。
/* Scss Document */ を消して、@charset "UTF-8"; から書き始めると無事にエラーは解消されました。
