SCSSの「Error: Invalid Windows-31J character “\xE3″」というエラーの回避法

SCSSの「Error: Invalid Windows-31J character "\xE3"」というエラーの回避法

SCSSを使っていて、エラーでつまづいたお話。

同じエラーで苦しんでいる人がいたら役立ちたい。自分はこれで30分くらい無駄にしました(T_T)

SCSSを使ってると、コンパイルエラーが出る事がありますよね。
この「Error: Invalid Windows-31J character “\xE3″」というエラーもコンパイル時のエラーなんですが、どうしてもこのエラーが回避できずに困っておりました。
エラーの意味がわかってもなかなか改善できなかったのです(T_T)

今回はこのエラーの原因と回避策。

[ad]

Invalid Windows-31J character “\xE3″ってなんじゃい!!

調べてみたところ、文字コードWindows-31J(Shift-JISの拡張版みたいなやつ)が無効っすみたいなエラーのようです。

ファイル内に日本語があり、エンコードの指定が無い時に出るようですね。

回避策は?

ここだけ見れば非常に簡単。
エンコードの指定を入れてあげれば良いんです。

@charset "utf-8";

これだけ。
なんだ!!めっさ簡単♪と思い、すぐにファイルを修正。

修正前
//テスト。
html{
}

これに、エンコード指定を入れましょう。

修正後
@charset "utf-8";
//テスト。
html{
}

これで、だいたいの方はエラー解消できたと思います。
まだエラーが出ている人は、自分と同じ状況かもしれないので続きを読んでくださいm(__)m

エラーが消えない!って場合は。

もしかして、Dreamweaver使ってませんか!?
自分はそれでだいぶハマりました。

ソースを一回全部見直してみましょう。

/* Scss Document */
@charset "utf-8";
//テスト。
html{
}

こんな事になってませんか??

1行目、なんか入ってますよね・・・?
Dreamweaverでは、SCSSファイルを新規で作成した場合、必ず1行目に「/* Scss Document */」というテキストが入ります。
んで、その下からソースを書いていたので、エンコード指定もその下に入れていました。
それが問題だったようです。

@charset "utf-8";
//テスト。
html{
}

元々入っている「/* Scss Document */」を消す!もしくは、2行目の@charset “utf-8”;を、このテキストの上に持ってくる!
これで回避できました!!

さいごに

なんでコメントアウトしてて、しかもアルファベットなのにその下にエンコードの指定を入れてもエラーが回避できないのか、そこはさっぱりわかりません。
が、とりあえずエンコード指定はファイルの一番最初に持ってこないといけないみたいですね。勉強なりました。

Dreamweaver、アップデート後SCSSに対応したりGit使えたりエディタにBracketsが採用されたりと、かなり使いやすく、しかも軽くなってます。
なのでもうほぼDreamweaverを使ってサイトの制作はしているのですが、こういう痒いトコにまだ手が届かない時があります(T_T)

いらんやん、この1行・・・無しにしてくれたら良いのに・・・
設定で無しにできたりするのかな?ちょっと勉強してみます。もし誰か知っている方がいれば教えてくださいm(__)m

でも、全てひっくるめてDreamweaverはかなり使いやすくなっていて便利です!

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください