WEB制作者向け無料テーマ「Arkhe」をリリースしました

SASS・SCSSのコンパイル時にエンコードエラー?Dreamweaverで気をつけたい以外な原因と対処法

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"; から書き始めると無事にエラーは解消されました。

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次