Sublime Text3でCompassのbuild時にエラーが出る場合の対処法

scss

Sass(SCSS)の存在は知っていたものの、なかなか手を付けてきませんでしたが、皆さん大絶賛しているので、ここ1ヶ月ほど試しています。

mixinとか機能をフルに活用しているわけではないので、ココが良い、コレはちょっと……といった詳しいレビューはできません。でも、使った感じ、管理はしやすいなと。共通のカラーを設定しておけば色の変更が簡単だし、入れ子にして記述しておくと後々の修正がやりやすいですね。

Sublime Text3でSass、Compassを使おうと思い、様々な記事をもとに設定したんですが、ビルドするとエラーが出て、コンパイルできません。

Sublime Text2でビルド時のコンパイルエラーの対処法を書かれているブログ記事はありましたが、Sublime Text3の場合の対処方法が見つけられなかったのでメモ。

photo credit: lewro via photopin cc

原因はfont-familyの日本語指定

原因はすぐわかりました。font-familyに「メイリオ」や「ヒラギノ角ゴ Pro W3」など、日本語で指定していたこと。

これは、Sublime Textに関係なく、Compassでコンパイルした時にエラーが出てしまいます。この対処は以下の記事が大変参考になりました。

参考記事
CompassでコンパイルエラーEncoding::UndefinedConversionErrorが出た時の原因と対策 | RedmanM

環境によってうまくいく場合といかない場合があるようですが、私は他の方法の「1. cmd(コマンドプロンプト)で set RUBYOPT=-EUTF-8 と入力してから実行する。」でうまくいきました。

Sublime Text3でのエラー対処法

あくまでも私がうまくいった方法です。

基本設定->Packagesフォルダを選択します。(日本語化している場合)開いたフォルダにある「Compass」の中の「build.cmd」を開きます。

ここに、先ほどの「set RUBYOPT=-EUTF-8」を追加。これで私は解決しました。

@echo off
setlocal EnableDelayedExpansion
set fileDir=%~f1
set RUBYOPT=-EUTF-8

if exist “%fileDir%\config.rb” goto :build

Sublime Text以外でコンパイルしたほうが楽かも

いろいろ調べて解決したものの、Sublime Text以外でコンパイルしたほうが楽なのかなと思いました。

以下の記述をしたbatファイルを作業前に起動する。

set RUBYOPT=-EUTF-8
compass watch

これでscssファイルを上書き保存すると、自動でcssファイルを生成しなおすので。個人的にはこっちのほうが楽ですね。

公開:2014/05/29