SASSファイルをWindowsコマンドプロンプトからコンパイルすると、僕の環境では主に日本語が文字化けします。

SASSファイルから生成したCSSファイルを直接弄るワケでもないので特に問題は無いと思っていたのですが、CSSのプロパティ「content」で特殊文字を表示しようとしたら見事に文字化け。

文字化けに対処する必要が出てしまいました。

文字化けの対処方法

SASSファイルをコンパイルするコマンドを入力する前に、以下のコマンドを入力することで文字化けを防ぐことが出来ます。

set RUBYOPT=-EUTF-8

例えばCompassでコンパイルする場合は

set RUBYOPT=-EUTF-8
compass w

という風になります。

参考になったページはこちら。

WindowsでEncoding.default_externalをUTF-8にするには – すがブロ

自分が使ったわけじゃないんですけど、compassを使うときにSASSファイル等はUTF-8なんだけどWindows環境でcompassを使ってビルドしようとするとデ...

毎回入力するのが面倒ならバッチファイルで対応

僕、今まで毎回コマンドプロンプトを開いてはコマンドを打ってコンパイルしてました。compass wと入力するだけだったので「まぁいっか」と効率考えずに毎日同じことを繰り返してました。

ただ、今回のset RUBYOPT=-EUTF-8は入力するのがすっごく面倒。良い機会なのでバッチファイルを作成することに。バッチファイルとは、MS-DOSやWindowsで複数の処理を記述し一括してプログラムを実行させるファイルのことです。

バッチファイルの作成方法

まず、どこでも良いので右クリック→「新規作成」→「テキスト ドキュメント」で空のテキストファイルを作成します。

次に、作成したテキストファイルを開いて以下のコマンドをコピーして貼り付けます。

cd /d %~dp0
set RUBYOPT=-EUTF-8
compass w

しかし、3行目はCompassでのコンパイル方法です。Compassを使わないで直接SASSのコンパイル機能を使う場合は

sass test.scss:test.css

とSASSのコンパイルコマンドに書き換えて下さい。

そしてこの編集したテキストファイルに任意の名前を付け、拡張子を「.bat」にして保存して下さい。

ただし、ファイル名とコマンド名が被らないようにして下さい。

例えばバッチファイルの3行目のコマンドはcompass wになっています。今回作成するバッチファイル名を「compass.bat」のようにしてしまうと、3行目の「compass」がバッチファイルを起動するコマンドになるようで無限ループになります。僕はここで少しハマりました。

最後に、このバッチファイルをコンパイルしたいフォルダへ放り込みます。Compassを使用しているのであれば、「config.rb」ファイルで指定したフォルダに放り込んで、ダブクリックで実行するとコンパイルが開始されます。

（config.rbでhttp_path = “/”と設定してあるならconfig.rbと同じ階層のフォルダに入れます）

これらはこちらの本が参考になりました。