Bootstrap 3.xで使用される.mapファイルは何ですか？

CSSフォルダーには、ファイル拡張子が.mapの2つのファイルが含まれています。彼らです：

bootstrap-theme.css.map
bootstrap.css.map

それらは縮小されたファイルのように見えますが、何のためにあるのか私にはわかりません。

Chrome DevToolsでのCSSプリプロセッサの使用から：

多くの開発者は、Sass、Less、StylusなどのCSSプリプロセッサを使用してCSSスタイルシートを生成します。CSSファイルが生成されるため、CSSファイルを直接編集してもあまり役に立ちません。

CSSソースマップをサポートするプリプロセッサの場合、DevToolsを使用すると、[ソース]パネルでプリプロセッサソースファイルをライブ編集し、DevToolsを離れたりページを更新したりすることなく結果を表示できます。生成されたCSSファイルによってスタイルが提供されている要素を検査すると、[要素]パネルには、生成された.cssファイルではなく、元のソースファイルへのリンクが表示されます。

エラーを取り除くだけの場合は、次の行も削除できますbootstrap.css。

/*# sourceMappingURL=bootstrap.css.map */

これらはソースマップです。これらを圧縮されたソースファイルと一緒に提供します。FirefoxやChromeのツールなどの開発者ツールは、それらを使用して、コードが圧縮されていないかのようにデバッグできるようにします。

ブートストラップcssはLessによって生成できます。マップファイルの主な目的は、CSSソースコードをChrome開発ツールのより少ないソースコードにリンクするために使用されます。以前使用していたように。要素をChrome開発ツールで検査するとします。あなたはcssのソースコードを見ることができます。しかし、ブートストラップCSSファイルを含むページにマップファイルを含める場合。調べたい要素のスタイルに適用される少ないコードを見ることができます。

パフォーマンスに影響を与えずに、クライアント側のコードを読みやすくし、さらに重要なことには、それを結合して縮小した後でもデバッグできるようにしたいと思ったことはありませんか？さて、あなたはソースマップの魔法を使うことができます。

この記事では、実用的なアプローチを使用したソースマップについて説明します。

これらのファイルを探してここに来た人（私のように）は、通常.map、URLの末尾に追加することでファイルを見つけることができます。

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css.map

必ずバージョンを、使用しているBootstrapのバージョンに置き換えてください。

CSSマップファイルとは何ですか？

これは、CSSファイルをそのソースファイルにリンクするJSON形式のファイルであり、通常は、プリプロセッサ（Less、Sass、Stylusなど）で記述されたファイルです。これは、Webからソースファイルにライブデバッグを行うためのものです。ブラウザ。

CSSプリプロセッサとは何ですか？例：Sass、Less、Stylus

これは、プログラミング能力を使用して、CSSを堅牢かつ迅速に生成するCSSジェネレーターツールです。

Bootstrap 3.xでマップファイルが見つからない理由を知りたい場合は、正しいバージョンがインストールされていることを確認してください。私が探していた望ましい効果を得るために3.3.7をロードする必要がありました。