会社はMac、自宅はWindowsを使用しています。
MacではSassをよく利用しているのですが、自宅でSassを利用していませんでした。
今回久しぶりにWindowsで使ってみたところ、困ったことがいくつかあったので忘れないようにメモしておきます。
SassでWatch機能を動かしてみる
Sassはすでにパソコンにインストール済みです。
scssファイルには下記のように記載しました。
#contact {
margin-bottom: 5em;
h2{margin: 2em 0 1em;}
}
まずは、コマンドプロンプトでコンパイルしたいフォルダに移動します。
※以下は間違ってます。
cd C:\移動したいフォルダ
ん？移動しません。Macだとこれで移動するんですが、Windowsは違うようです。
※以下が正しい指定方法です。
cd /d C:\移動したいフォルダ
移動できました！
次にコンパイルをしてみます。
sass コンパイル前のSCSSファイル.scss コンパイル後のCSSファイル.css
こちらはうまく動きました。
上記だとこのようにコンパイルされます。
#contact {
margin-bottom: 5em; }
#contact h2 {
margin: 2em 0 1em; }
個人的にこの形式でコンパイルされるのが好きではないので、コンパイルスタイルを変更します。
sass コンパイル前のSCSSファイル.scss コンパイル後のCSSファイル.css --style expanded
上記だと下記のようにコンパイルされます。
#contact {
margin-bottom: 5em;
}
#contact h2 {
margin: 2em 0 1em;
}
次に.scssファイルを保存したら自動的にコンパイルするようにします。
sass --watch コンパイル前のSCSSファイル.scss コンパイル後のCSSファイル.css
下記エラーがでました。
Did you mean: sass –watch コンパイル前のSCSSファイル.scss コンパイル後のCSSファイル.css
Use –trace for backtrace.
googleで検索しても対応方法が見つかりません。
Windowsでwatchは鬼門と書かれていて、どこかでCompassならコンパイルできたというのでCompassで作業してみます。
CompassでWatch機能を動かしてみる
Compassはすでにパソコンにインストール済みです。
まずは、コンパイルしたいフォルダ直下にconfig.rbファイルを作成します。
config.rbファイル内に下記のようにディレクトリやスタイル形式を指定します。
http_path = "/"
css_dir = "css"
sass_dir = "sass"
images_dir = "img"
javascripts_dir = "js"
output_style = :expanded
line_comments = false
コマンドプロンプトでコンパイルしたいフォルダに移動します。
cd /d C:\移動したいフォルダ
.scssファイルを保存したら自動的にコンパイルするようにします。
compass watch
>>> Compass is watching for changes. Press Ctrl-C to Stop.
と表示されたので動いているように見えます。
実際に、scssファイルを更新してみます。
何も起こりません。以前は、コンパイルできた気がするのですが・・・
もしかして・・・やっぱり・・・
実は、Eドライブ（外付けHDD）で今回作業していました。
Cドライブにファイルを移動してコンパイルしてみるとできました！！
sassやcompassはCドライブにインストールしているので、同一ドライブ内でないと動かないんですね。
前も同じミスした気がします。
Cドライブにファイルを移動してからは、sassもcompassも問題なく動くことを確認できました。
目次に戻る