My Web道

WEB制作科 受講記録 …とその後も続くWEB制作に関する活動・学習記録です。

Scssコンパイル時のエラー「Invalid Windows-31J character」 原因と解決策は?

f:id:sntkk3:20180417220059p:plain

「Invalid Windows-31J character」 エラーって?

発生プロセス

Webページ追加に伴い、scssファイルを新規作成、
いつものようにコンパイルしようとしたところ、エラー発生。

症状

以下、その際 Sass プリプロセッサーである Koala で出力されたエラーメッセージです。

f:id:sntkk3:20180417213754p:plain

これによると、
「Invalid Windows-31J character」とあります。
どうも文字コードが正常に認識されていないっぽいです。

そしてこのエラー発生後、
それまで正常に読み込めていたスタイルも効かなくなり、ページはHTMLタグだけで表現されている状態に。


そこでこの「Invalid Windows-31J character」エラーの原因と解決方法を確認してみました。

確認結果

原因

追加scssファイルの先頭で文字コードを"utf-8"に指定していなかったため、scssファイルが正しく認識されず、正常にコンパイルされなかった模様。

「Invalid Windows-31J character」解決方法

新規作成したscssファイルの最初の一行に、

@charset "utf-8";

を追加し、再度保存。

これだけで、scssファイルが正常に読み込まれるようになり、スタイルに反映されました。


わかってみると何てことはないのですが、本当に些細な原因。
たった一行が原因で、それまでのスタイルが一切効かなくなっちゃたりするんですよね。
うん、勉強になりました。


以上、ご参考まで。


【参考記事】
Windows環境でStyleDoccoを使う際に発生する「Invalid Windows-31J character」の解決方法 - Change the World! : http://changesworlds.com/2014/11/how-to-resolve-the-invalid-windows-31j-character-with-styledocco-on-windows/

1行追加するだけ!CSSファイルが文字化けした時の対処法 | AUTOCODING MAGAZINE : https://autocoding.jp/magazine/1lineonly-cssfile-garbledcharacters/

cssが効かない場合のよくある、ありがちなミスと解決方法 | テクブロ : http://www.tecblo.com/other/1475.html

CSSが効かない・反映されないときの対処法まとめ : https://saruwakakun.com/html-css/wordpress/cant