Windows環境＋compass＝@charset "Windows-31J"; ∴日本語文字化けな件
Windows環境で、compassを使ってcssの書き出しをしている場合、デフォルト文字コードを正しく設定してやらないと文字化けしますよ、というお話です。
症状
.hello:after { content: 'こんにちは！'; }
こんな感じのcssを書いていたのですが、見事に文字化けしました。 sassファイルに「@charset utf-8」とかいても、もちろんソースの文字コードをutf-8にしても、文字化け。 書きだされたcssを確認すると、1行目に「@charset "Windows-31J";」と入っています。 ここを試しにutf-8に書き換えてやると、文字化けはすぱっとおさまりました。 でも毎回書きだされたcssに手を加えるのは非現実的です。原因と対処方法を調べました。
原因
compass（正確にはcompassを動かしているruby）がファイルを読み込む際、文字コードが指定されていないと、デフォルトの文字コード「Windows-31J」で処理するためのようです。
対処方法として探しあてた方法
以下、インターネットの海を探してきて探し当てた方法です。 一番楽で確実っぽいのは4なので、4だけで十分だと思います。 が、私は1から順番に試した挙句、最後の最後に4の内容を発見したのです。せっかくなので…記念に書いておきます…。
- そもそも日本語を使わないでなんとかする
- コマンドプロンプトで「compass watch」する前に「set RUBYOPT=-EUTF-8」
- Windowsの環境変数に、変数名「RUBYOPT」変数値「-EUTF-8」を追加する
- config.rbにEncoding.default_externalの指定を追加する
1. そもそも日本語を使わないでなんとかする
例えばfont-familyの設定で、「メイリオ」→「Meiryo」、「ヒラギノ角ゴ Pro W3」→「Hiragino Kaku Gothic Pro」などの変更で対応できる内容であればそれが一番簡単です。 でも1行目の「@charset "Windows-31J";」がちょっと気持ち悪いです。 そして今回はどうしてもcssで2バイト文字を挿入したかったため、この方法では対処できませんでした。
2. コマンドプロンプトで「compass watch」する前に「set RUBYOPT=-EUTF-8」
set RUBYOPT=-EUTF-8
と入力することで、rubyのデフォルト文字コードがUTF-8になります。 すると書きだされるcssの1行目も「@charset "UTF-8";」となります！やったー！！
ただしこの方法は、compass watchする前に、毎回行う必要があるので注意です。忘れるとまた Windows-31J がやってきます。
compass watchとセットで入力するのは私にとっては結構苦行なので、別な方法を探すことにしました。
3. Windowsの環境変数に、変数名「RUBYOPT」変数値「-EUTF-8」を追加する
環境変数にセットしてしまえば、毎回setのコマンドを打たなくても大丈夫ということなので、設定してみます。 環境変数は、Windows7の場合 コントロールパネル→システムとセキュリティ→システム→システムの詳細設定 から設定画面が開けます。
ユーザー環境変数とシステム環境変数とありますが、ユーザーの方が影響が少なくてすむのでユーザー側に追加します。 「新規」ボタンで変数名「RUBYOPT」変数値「-EUTF-8」として「OK」です。
設定を反映させるためにWindowsを再起動します。 compass watch………うまくいきました！やったー！！！
…解決解決と思っていたら、もっと簡単にできる方法がありました。
4. config.rbにEncoding.default_externalの指定を追加する
compassの設定ファイルconfig.rbの適当な位置に、
Encoding.default_external = 'utf-8'
を追加するだけでOKっぽいです…。なんということでしょう。
Windows環境のcompassで”Invalid Windows-31J character”のエラー
結論
3の方法はそのユーザーのruby環境下全体にデフォルト文字コードUTF-8設定、4の方法はそのconfig.rbが適用される範囲のみデフォルト文字コードUTF-8設定になるので、お好みでということで…。
現場からは以上です。
