chromeのDeveloper Toolsでcssの確認した際に
どのscssファイルに記載しのか知りたくなることがあります。
そういう時のメモ
参考サイト
google chrome - Chromium: missing sass support - Stack Overflow
Sass - Compassのsourcemap出力 - Qiita
「souce map sass」で検索すると
いろんなサイトが出てきますが、古い記事が多いです。
chrome側の設定の話が出てきた時は古い記事です。
chromeのv30以降では標準でsassに対応してるらしいです。
手順
1. sassのアップデート
source mapへの対応はsassのv3.3.0以降のみとなるので、
まずそれをインストール
gem install sass -v '>=3.3.0alpha' --pre結構時間かかりますが辛抱強く待ちましょう
---compassを使わない場合はこれで終了
sass --watch --sourcemap sass/styles.scss:styles.css
compassを使う場合は
Compassは現時点ではsourcemapの出力に正式対応していないのでalpha版をインストールする
2.compassのアップデート
gem install compass --pre
3.compassのconfig.rbに一文追加
sourcemap = true
以上でchromeのDeveloper Toolsにsassのファイル名・行番号が 出力されるようになります。
--------------------------------------
弊社では独自管理画面によるシステム開発、Web制作など幅広く対応しております。
お気軽に問い合わせ下さい。
福岡のシステム開発・Web制作 C-limber（クライマー）株式会社
0 コメント:
コメントを投稿