Sass のソースマップの使い方

JavaScript のソースマップがあまりにも便利なので、 もはやソースマップ無しでは開発がツライという感じなのですが、 最近ふと Sass にもソースマップがあったことを思い出しました。 ということで Sass でソースマップを使う方法をまとめておきます。 いまさら感がとんでもなくスゴイですが、誰かのお役に立てれば幸いです。

ソースマップとは?

ソースマップについておさらいしてみましょう。 Sass の使い方がわからないという方は、まずは「Sass の使い方(その1:概要)」を参考にしてください。

Sass で複数の Sass ファイル(.scss、.sass)を1つの CSS ファイル(.css)にコンパイルしてしまうと、 Web ブラウザでスタイルの確認をする際に、どのファイルの、どの行のスタイルが適用されているのかを探すのが難しくなります。 何故なら、適用されている CSS ファイルはコンパイルのファイルであって、 修正しないといけないのはコンパイルの Sass ファイルだからです。 CSS ファイルを圧縮(minify)した場合は、さらに難しくなります。

そこで登場するのがソースマップファイル(.map)です。 CSS のソースマップファイルは拡張子が .css.map になります。 CSS のソースマップファイルがあると、Web ブラウザは、コンパイル後の CSS ファイルと、コンパイル前の Sass ファイルを結び付けることができるようになります。 それにより、Web ブラウザのデベロッパーツール(開発者ツール)などで、コンパイル前の Sass ファイルでの場所を表示してくれるようになります。

JavaScript にも同じソースマップファイル(.js.map)がありますので、そちらの方がなじみが深いかもしれません。 ソースマップファイルがあると開発時にデバッグしたりするのが容易になりますのでオススメです。

なお、動作確認をする際はキャッシュが効いてる可能性があるので、 ハードリロード(スーパーリロード)を忘れないようにしましょう。

方法1:デフォルトのソースマップファイルを出力する

Sass ではソースマップファイル(.css.map)は、デフォルトで出力されるようになっています。 sass コマンドをオプション無しで実行すると、ソースマップファイルが出力されます。

例:非公開ディレクトリ "assets/sass" のファイルを変換し、公開ディレクトリ "public/css" に出力する場合
sass assets/sass:public/css

このデフォルトのソースマップファイルには1つ問題があります。 Sass ファイル(.scss、.sass)を非公開ディレクトリに置いている場合、 Sass ファイルでの場所は表示されますが、クリックするとエラーになります。 Chrome の場合だと、"Could not load content for (ファイルのURL) (HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE)" のように表示されるようです。

notfound.png

これは、デフォルトのソースマップファイルでは、 Sass ファイルへのアクセスが HTTP リクエストになってしまうことが原因です。 Sass ファイルを公開ディレクトリ(ドキュメントルート配下)に置いている場合はこれでも問題はないのですが、普通は置かないと思います。 Sass ファイルからコンパイルした CSS ファイル(.css)だけを公開ディレクトリに置くはずです。 Sass ファイルが非公開ディレクトリに置いてある場合、HTTP リクエストで 404 Not Found になってしまいますから、 Sass ファイルを読み込むことができず、ソースマップが正しく機能しないのです。

pattern1.png

方法2:ソースマップファイルに Sass ファイルを埋め込む

Sass ファイル(.scss、.sass)を非公開ディレクトリに置いている場合、 Sass ファイルを HTTP リクエストでは取得することができません。 ではどうするかというと、ソースマップファイル(.css.map)の中に Sass ファイルを埋め込むという方法があります。 こうすることで Sass ファイルへの HTTP リクエストがなくなるため、404 Not Found を回避することができます。 なお、当然と言えば当然なのですが、ソースマップファイルに Sass ファイルが埋め込まれるようになるため、 ソースマップファイルのサイズはその分だけ大きくなります。

pattern2.png

Sass ファイルを非公開ディレクトリに置いている場合、通常はこの方法を使用することになるのではないでしょうか。 Sass ファイルが正しく読み込めていれば、その Sass ファイルの内容が Web ブラウザ上に表示されます。 ソースマップが正しく機能している証拠です。

ok.png

ソースマップファイルに Sass ファイルを埋め込むには、--embed-sources オプションを使用します。

例:非公開ディレクトリ "assets/sass" のファイルを変換し、公開ディレクトリ "public/css" に出力する場合
sass --embed-sources assets/sass:public/css

方法3:CSS ファイルにソースマップファイルを埋め込む

CSS ファイル(.css)にソースマップファイル(.css.map)を埋め込むこともできます。 あまり用途は思いつきませんが、例えばソースマップファイルにアクセス制限がかかっているサーバーの場合などでしょうか。 CSS ファイルにソースマップファイルが埋め込まれているので、ソースマップファイルへの HTTP リクエストが発生しません。

Sass ファイル(.scss、.sass)を公開ディレクトリ(ドキュメントルート配下)に置いている場合は、 この方法でも問題ないように感じますが、普通は公開ディレクトリには置きません。 また、ソースマップファイルにアクセス制限がかかっているようなサーバーでは、 おそらく Sass ファイルにもアクセス制限がかかっていることでしょう。 結局ソースマップは正しく機能しません。

また、Sass ファイルを非公開ディレクトリに置いている場合は、 Sass ファイルへの HTTP リクエストが発生して 404 Not Found になってしまうため、 これでもソースマップは正しく機能しません。

つまり、この方法が正しく機能するのは、 ソースマップファイルには HTTP リクエストできないが Sass ファイルには HTTP リクエストできるという、 かなり特殊な状況ということになります。 サーバーの設定を見直して、上述の方法2が使用できるように設定した方が良いでしょう。

pattern3.png

CSS ファイルにソースマップファイルを埋め込むには、--embed-source-map オプションを使用します。

例:非公開ディレクトリ "assets/sass" のファイルを変換し、公開ディレクトリ "public/css" に出力する場合
sass --embed-source-map assets/sass:public/css

方法4:CSS ファイルにソースマップファイルと Sass ファイルを埋め込む

では、上述の方法2の --embed-sources オプションと、 方法3の --embed-source-map オプションの両方を同時に指定するとどうなるでしょうか?

例:非公開ディレクトリ "assets/sass" のファイルを変換し、公開ディレクトリ "public/css" に出力する場合
sass --embed-sources --embed-source-map assets/sass:public/css

理論的には CSS ファイル(.css)の中にソースマップファイル(.css.map)と Sass ファイル(.scss、.sass)が埋め込まれることになるため、 ソースマップファイルと Sass ファイルに HTTP リクエストすることなく Sass ファイルを見れるはずです。 用途としては、ソースマップファイルにアクセス制限がかかっている場合ということになるでしょうか。

pattern4.png

しかしこれは Web ブラウザ側の動作に少し問題があるようで、 Firefox ならちゃんと Sass ファイルを見れるのですが、Chrome(Edge)では何故か見れないようです。 Firefox では見れるので Chrome のバグのような気もしなくもないのですが、単純に対応していないだけなのかもしれません。 素直にソースマップファイルにアクセスできるようにサーバーの設定を変更した方が良いのではないでしょうか。

方法5:ソースマップファイルを出力しない

ソースマップファイル(.css.map)は開発時のみ必要になるファイルなので、本番環境では不要でしょう。 また、開発時であっても、コンパイル前の Sass ファイル(.scss、.sass)より、 コンパイル後の CSS ファイル(.css)の方がわかりやすくて、ソースマップファイルは不要という方もいると思います。

ソースマップファイルを出力しないようにするには、--no-source-map オプションを使用します。

例:非公開ディレクトリ "assets/sass" のファイルを変換し、公開ディレクトリ "public/css" に出力する場合
sass --no-source-map assets/sass:public/css

参考サイト

関連記事

CSS自体は楽しいものですが、長く運用していると、CSSファイルは巨大化し、複雑になり、メンテナンスが難しくなりがちです。CSSファイルは誰もメンテナンスできないなんていうプロジェクトに何度か遭遇したことがあります。巨大で複雑なCSSファイルをメンテナンスできるようにするには、どうすればよいでしょうか?そこで登場するの ...
前回、「Sass の使い方(その1:概要)」の続きです。今回はファイルの書き方についてです。コメントSass でもファイルにコメントを書くことができます。単一行コメントCSSでは、単一行コメントの // は使えませんが、Sass では使用することができます。単一行コメントの内容は、CSSとして出力されません。複数行コメ ...
前回、「Sass の使い方(その2:ファイルの書き方)」の続きです。今回はファイル分割についてです。別のファイルを読み込む(@use)Sass で便利だなと思う機能は、複数のファイルに分割できることでしょう。ファイルが分割できることで、1つのファイルが小さくなり、メンテナンスがしやすくなります。読み込まれる側のファイル ...

記事検索

最新記事

人気記事

RSSフィード

お知らせ

フィードバック

要望などあれば、お気軽にどーぞ。 不具合やバグを発見した場合も、連絡をいただけると助かります。

匿名でフィードバックする
匿名でフィードバックする

要望などあれば、お気軽にどーぞ。 不具合やバグを発見した場合も、連絡をいただけると助かります。

なお、このフォームから入力された内容について、管理者から返信はできませんので注意してください。 もし、管理者からの返信が必要であれば、X(Twitter) もしくは、お問い合わせより、お願いします。

  • フィードバックの送信が完了しました。