SASSファイルをWindowsコマンドプロンプトから文字化けさせずにコンパイルする方法

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

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

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

文字化けの対処方法

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

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

という風になります。

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

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

photo credit: gagilas via photopin cc
photo credit: gagilas via photopin cc

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

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

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

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

sass-character-code01

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

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

 

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

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

Windows7でのbatファイルのアイコン
Windows7でのbatファイルのアイコン

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

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

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

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

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

最終更新日:2014年9月28日

コメント

「何かそこ違うよ」「こうした方が良い」っていう部分があったら指摘して頂けると嬉しいです。

トラックバック

トラックバックは現在ありません。

Trackback: https://increment-log.com/sass-character-code/trackback/