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

  • 更新日:
  • 公開日:

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

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

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

文字化けの対処方法

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

set RUBYOPT=-EUTF-8

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

set RUBYOPT=-EUTF-8
compass w

という風になります。

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

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

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

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

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

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

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

sass-character-code01

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

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

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

sass test.scss:test.css

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

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

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

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

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

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

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

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

書いた人

Symbol Mark

Ryoichi(しつ)

除菌ティッシュを買い込んで使いきれずによく乾かす人。

療養目的で退職し、どうやって生きていくか模索中。最近は勉強目的でLaravelやVue.js弄ったり、趣味で音で遊んでます。

※2019年10月16日現在ブログリニューアル中です。崩れなどが発生していたらすみません。

うぇぶ: @s_ryone