拡張子が .map のファイルの取り扱い
更新日: 2022/11/23
概要
Bootstrap を使おうとしたときに、配布ファイルの中に入っている「.map」とはなんだ、というところから、本番環境で「DevTools failed to load SourceMap」と言われない対策。
用語
.map ソースマップとは
ソースマップは、コンパイル時に出力される「.map」という拡張子のファイルです。 CSSを使用するブラウザーやツールに、CSSが生成元のSassファイルにどのように対応するかを伝える役目を持ちます。
(引用: https://miruraku.com/sass/nosourcemap/)
ということだそうです。
逆にいうと開発者以外には要らないものであるということです。
Sass
Syntactically Awesome Style Sheets の略。
CSSを定義（記述）するために、機能拡張して扱いやすくした言語のこと。
なぜ .map が必要か
対応しているブラウザの開発者モード等でデバッグした際、確認しているスタイルが元のSassファイルのどこに対応しているかを教えてくれます。
.map ファイルがあることで修正が楽になるんですね。
本番環境でソースマップがないと言われないために
Bootstrap をそのままカスタマイズしないで使う時に、配布ファイルされているファイルを使うとします。
この時サーバーに bootstrap.min.css だけを追加して使用すると DevTools failed to load SourceMap というエラーが確認できます。
原因
例えば、bootstrap.min.css の最下部は下記のようになっている。
...
flex{display:flex!important}.d-print-inline-flex{display:inline-flex!important}.d-print-none{display:none!important}}
/*# sourceMappingURL=bootstrap.min.css.map */
この最終行のコメントアウト部分をブラウザが認識してくれて、.mapファイルを探したけど見つからなかった（404）と言っているわけでした。
対策
1. 読み込みのコメントを削除する
上記の例であれば下記を削除するだけである。
/*# sourceMappingURL=bootstrap.min.css.map */
2. 対象のファイルを追加する。
bootstrap.min.css と同じ階層に bootstrap.min.css.map を配置することでも可能である。
ただし公開しているサーバーに不要なものは極力置きたくないので 1 の方が良いと思う。
カスタマイズするのであれば検証中は大きな助けになるので残しておき、リリースの時にはコメントを消すなどするとよいかもですね。