Help us understand the problem. What is going on with this article?

WindowsでSass環境を構築

More than 5 years have passed since last update.

Sassでコンパイルできる環境と、生成された CSS をWebブラウザで localhost として参照できるようになるところまで。
サーバサイドのことをよく知らない人用。
scss ファイルはすでにチームメンバーが git にコミットしていて、新たなメンバーが参入し、開発環境を構築する、という状況を想定してます。
インストールするものは3つ。

  1. Ruby
  2. Sass
  3. Nginx(ApacheでもOK)

Ruby をインストール

Ruby-1.9 から RubyGems(後述)が標準付属となったため、1.9 以上をインストールする。今回は安定版の Ruby 1.9.3-p392 をダウンロード
http://rubyinstaller.org/downloads/

インストーラのオプションが3つあるので、「環境変数のPATHに通す設定」にチェックを入れる。

コマンドプロンプト起動

Windows のショートカットキー Windowsキー + R で、「ファイル名を指定して実行」を開き、cmd と入力するとコマンドプロンプトが開く。
下記のように Ruby のバージョンが表示されればインストールOK。

>ruby -v
ruby 1.9.3p392 (2013-02-22) [i386-mingw32]

Sass インストール

ここから Ruby に付属してるパッケージ管理ソフトの RubyGems を使う。Windows OS は文字コードが Shift_JIS なので、あらかじめ UTF-8 指定しておく(通常、RubyGemsを更新するときだけで良いはず)。

>set LANG=ja_JP.UTF-8

RubyGems を更新。

>gem update --system
Updating rubygems-update
Fetching: rubygems-update-2.0.3.gem (100%)
Successfully installed rubygems-update-2.0.3
Installing RubyGems 2.0.3
RubyGems 2.0.3 installed
Installing ri documentation for rubygems-2.0.3

RubyGems から Sass をインストール。

>gem install sass
Fetching: sass-3.2.9.gem (100%)
Successfully installed sass-3.2.9
Installing ri documentation for sass-3.2.9

scssファイルのコンパイル

git から clone したコンテンツファイルのプロジェクトが下記ディレクトリにあるとする。
D:\git\ui-project

scss ファイルは下記ディレクトリにあるとする。
D:\git\ui-project\resources\css\scss

CSS ファイルは下記ディレクトリに生成されるものとする。
D:\git\ui-project\resources\css

scss ファイルのディレクトリに移動してコンパイル開始

>D:
>cd git\ui-project\resources\css\scss
>sass --watch scss:.

CSS が生成されていることを確認。

Nginx をインストール

用途は CSS ファイルをローカル環境上で公開することなので、どのバージョンでも大丈夫。最新の nginx/Windows-1.5.0 をダウンロード。
http://nginx.org/en/download.html
ZIPを解凍。今回はDドライブ直下に配置する。
コマンドプロンプトから起動する。

起動
>D:
>cd nginx-1.5.0
>start nginx

ブラウザのアドレスバーに localhost と入力してアクセスできることを確認。
この HTML は D:\nginx-1.5.0\html\index.html にあります。

停止
>nginx -s stop
コマンドのヘルプ
>nginx -h

設定ファイル編集

D:\nginx-1.5.0\conf\nginx.conf をテキストエディタで開く。
下記のように書いてある部分に注目する。
これは http://localhost の "/"(ルートディレクトリ)のコンテンツは、ローカルPC上の <Nginxインストールディレクトリ>/html ディレクトリ配下にコンテンツがあるよという意味。

location / {
 root html;
 index index.html index.htm
}

これと同じ要領で、上記設定の下部に以下を追記する。
http://localhost/resources がローカルPC上の D:\git\ui-project 配下にあるよという意味。

location /resources {
- root D:\git\ui-project\resources;
+ root D:\git\ui-project;
}

Nginx を再起動するか、リロードして設定ファイルを読み込みなおす。

>nginx -s reload

ブラウザのアドレスバーに http://localhost/resources/xxx.css を入力。xxx.css の部分は、コンパイルによって生成された CSS ファイルを書く。
アクセスできるようになってることを確認する。

cyberagent
サイバーエージェントは「21世紀を代表する会社を創る」をビジョンに掲げ、インターネットテレビ局「AbemaTV」の運営や国内トップシェアを誇るインターネット広告事業を展開しています。インターネット産業の変化に合わせ新規事業を生み出しながら事業拡大を続けています。
http://www.cyberagent.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away