Windows 10でRuby Sass Compass 環境構築

Mac で開発していたSassでコンパイル案件をやることになった。
開発機がWindowsだったので手元のMacでやるかNodeでやるか迷ったのだけれでもWin10だったらわりとスムーズにいくのではと思い、環境を再現した。
やっぱり文字コードやらWindows固有の問題でつまづいてコマンドを叩いたら即環境構築というわけにはいかなかった。

Ruby Gem Sass Compass

まず、パッケージマネージャーにはChocolatey を使います。

Ruby Gem Sass Compass をインストールします。

# Ruby をインストール
> cinst ruby

Gem を使用するにはMSYS2というパッケージをインストールします。

# MSYS2のインストール
> cinst msys2 --params "/NoUpdate"

# 環境変数を再読み込みします
> refreshenv

# 以下を実行する
# 2 - MSYS2 repository update
# 3 - MSYS2 and MINGW development toolchain
> ridk install 2 3

msys2をインストールするコマンドで別Windowが立ち上がったのでこちらで作業を続けます。

Sass Compass をインストールします。

> gem install sass
> gem install compass

ここからWindows 環境との闘いになります。

プロジェクトルート（setting.rb がある階層）で以下のコマンドを実行すれば .sass から.css が生成されるはずです。
ここからコマンドはGit bash 上で実行しています。

$ compass compile

文字コードエラー：Invalid Windows-31J character

Windows の文字コードはWindows-31J というS-JIS に似たなにかです。
そのためcompassだと文字をうまく処理できず以下の文字列を含んだエラーになってしまいます。

Invalid Windows-31J character

これを解決するには以下の通り文字コードをUTF-8だよと明示してあげて処理する必要があります。

.scss の先頭にUTF-8であることを明示する

コンパイル対象の.scss ファイルすべての先頭に以下を追記します。

@charset "UTF-8";

config.rb の先頭にUTF-8であることを明示する

Encoding.default_external = 'utf-8'

キャッシュディレクトリ深すぎる問題

compass がコンパイルするときにキャッシュディレクトリを作成するのですが、環境によってはそのディレクトリが深すぎてWindows ではファイルが生成できなかったりします。。
そのため、明示的にキャッシュディレクトリを指定してあげる必要があります。

config.rbにキャッシュディレクトリを指定する

以下を追記します。

cache = true
cache_path = 'C:/temp/sass/'

上記を踏まえてcompass を実行してみます。

$ compass compile
 modified config.rb
    clean c:/Dev/...
   delete c:/Dev/...
   delete c:/Dev/...
    write c:/Dev/...
    write c:/Dev/...

無事、.cssファイルが生成されました。
めでたしめでたし。

参考

Compassのimport-onceでエラー。コンパイル時に「No such file or directory」が出る場合の解決方法
chocolateyでruby on rails環境を構築
Windows環境のcompassで”Invalid Windows-31J character”のエラー
Windows環境でStyleDoccoを使う際に発生する「Invalid Windows-31J character」の解決方法 - Change the World!
sass - File to import not found or unreadable: compass - Stack Overflow
Compassのimport-onceでエラー。コンパイル時に「No such file or directory」が出る場合の解決方法