すたらブログ

文系Webプログラマの備忘録

WindowsでSass(SCSS)を使う準備

目次


Rubyをインストール

下記からRuby 2.2系をダウンロードします。
最新版は2.3系ですが、2.2系が安定しているそうです。

http://rubyinstaller.org/downloads/

インストールで気をつけるのは、下記にチェックを入れることです。

  • Rubyの実行ファイルへ環境変数PATHを設定する
  • .rbと.rbwファイルをRubyに関連づける

インストールの確認のため、コマンドプロンプトで下記のコマンドを実行します。
Rubyのバージョンが表示されれば成功です。

>ruby -v
ruby 2.2.5p319 (2016-04-26 revision 54774) [x64-mingw32]

RubyGemsを最新版にする

Rubyをインストールした状態では、エラーのせいでインターネット経由でのRubyGemsの更新やgemパッケージのインストールができません。

(RubyGemsの更新に失敗)
>gem update --system
ERROR:  While executing gem ... (Gem::RemoteFetcher::FetchError)
    SSL_connect returned=1 errno=0 state=SSLv3 read server certificate B: certificate verify failed (https://api.rubygems.org/specs.4.8.gz)

(gemパッケージのインストールに失敗)
>gem install sass
ERROR:  Could not find a valid gem 'sass' (>= 0), here is why:
          Unable to download data from https://rubygems.org/ - SSL_connect returned=1 errno=0 state=SSLv3 read server certificate B: certificate verify failed (https://api.rubygems.org/specs.4.8.gz)

これは、SSL証明書が古いことが原因だそうです。

そこで、別途RubyGemsの最新版を入手します。
下記で「GEM」をクリックして「rubygems-update-2.6.7.gem」をダウンロードします。

https://rubygems.org/pages/download

ダウンロードした場所をコマンドプロンプトで開き、下記を実行します。

>gem install --local rubygems-update-2.6.7.gem

次に下記を実行し、RubyGemsを更新します。

>update_rubygems --no-ri --no-rdoc

バージョンを下記で確認します。

>gem -v
2.6.7

最新版であることを確認します。

>gem update --system
Latest version currently installed. Aborting.

アップデート用パッケージはもう不要なので削除します。

>gem uninstall rubygems-update -x
Removing update_rubygems
Successfully uninstalled rubygems-update-2.6.7

上の記事では、この方法はRubyGems2.4ではエラーになる可能性があるとして、新しい証明書を入手するという別の方法をとるよう冒頭で警告を追記しています。
しかし、その証明書は現在のRubyGemsソースコードには含まれておらず、この方法も古いようです。
下記のファイルは存在せず、「404: Not Found」と表示されます。
https://raw.githubusercontent.com/rubygems/rubygems/master/lib/rubygems/ssl_certs/AddTrustExternalCARoot-2048.pem

また、上の記事が参照している記事でも追記されていて、2014年12月21日時点ではやはり手動による最新版RubyGemsの入手が良いそうです。

UPDATE 2014-12-21: RubyGems 1.8.30, 2.0.15 and 2.2.3 have been released. It requires manual installation, please see instructions below.


Sassをインストール

コマンドプロンプトで下記を実行します。

>gem install sass

確認します。

>sass -v
Sass 3.4.22 (Selective Steve)

試しにSassからCSSコンパイルする

試しにSassの公式サイトに載っているコードをコンパイルします。
SASS構文とSCSS構文、どちらでもかまいません。

test.scss

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

コマンドプロンプトで下記を実行します。
何もエラーが表示されなければ成功です。

>sass test.scss:test.css

下記のようなCSSが出力されるはずです。

test.css

body {
  font: 100% Helvetica, sans-serif;
  color: #333; }

/*# sourceMappingURL=test.css.map */

日本語使用時のエラーを解決する

Sassで日本語が使われていると、コンパイル時にエラーが発生します。
なお、これはSassに限らずWindowsRuby全般で起こるようです。

test.scss

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;
/* 日本語のコメント */
body {
  font: 100% $font-stack;
  color: $primary-color;
}
>sass test.scss:test.css
Error: Invalid Windows-31J character "\xE6"
        on line 3 of test.scss
  Use --trace for backtrace.

これを解決するために、Rubyの外部エンコーディングUTF-8に指定します。
コマンドプロンプトで下記を実行します。

set RUBYOPT=-EUTF-8

もしくは、Windows環境変数に直接追加します。

確認します。「UTF-8」と表示されるはずです。
これでSassのコンパイルが正常に実行されます。

>ruby -e "puts Encoding.default_external"
UTF-8