ChromeのDeveloper Toolsでスタイルシートのデバッグをするときに、コンパイル後のCSSファイルでなくSassのファイルの場所を表示するようにする。
CSSソースマップを使うわけだが、古い情報が多かったので今さらながらメモ。Compassを使用している想定。
環境
- OSX 10.9.5
- Google Chrome 42
- Sass 3.4.13
- Compass 1.0.3
sourcemapの生成
Sassのコンパイル時にsourcemapを生成させる。
config.rbにsourcemap = trueを追加するだけ。
sass_options = {:sourcemap => true}とかsass_options = {:debug_info => true}は不要。
環境設定によって振り分けて、以下のように編集する。
sourcemap = (environment == :production) ? false : true
これでSassのコンパイル時にCSSのディレクトリと同階層に*.css.mapが生成される。
Chromeの設定変更
Developer Toolsの開いて、右上の歯車マークをクリック。
Settings>General>Sourcesの「Enable CSS source maps」と「Auto-reload generated CSS」をチェックする。
※ chrome://flags/から設定を変更したりする必要はなし。
※ 「デベロッパー ツールのテストを有効にする」等の設定をしても現在のバージョンにはSettings>Experimentsに「Support for Sass」などの項目はない
ChromeのDeveloper Toolsからデバッグ
以上でDeveloper Toolsを開くとSassファイルの場所が示されるようになる。
その他
WordPressのテーマを作成する際、style.cssをテーマディレクトリ直下に置かなくてはいけないため、これだけ他のCSSファイルと階層が異なり困った（コンパイル後のstyle.css、style.css.mapの出力先の階層が異なってしまう。）また、移動させてもstyle.css.map内のsourcesがずれてしまう。結局、シンボリックリンクを貼りまくることでごまかしたが、何かいい方法はないものか。