CSS
フォルダーには、.mapファイル拡張子を持つ2つのファイルが含まれています。彼らです:
bootstrap-theme.css.map
bootstrap.css.map
それらは縮小ファイルのように見えますが、私は彼らが何のためにあるのかわかりません。
From 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 devツールのより少ないソースコードにリンクするために使用されます。私たちがしていたように。もし私たちがchrome devツールの中の要素を調べるなら。あなたはCSSのソースコードを見ることができます。ただし、ブートストラップCSSファイルを含むページにマップファイルを含めます。調べたい要素スタイルに適用されるコードが少なくて済みます。
パフォーマンスに影響を与えることなく、コードを組み合わせて縮小した後でも、クライアントサイドのコードを読みやすく、より重要なことにデバッグ可能にしておくことを望んだことはありますか。さて、あなたはソースマップの魔法を通して可能です。
この記事 は実用的なアプローチを使ってソースマップを説明します。
私のようにこれらのファイルを探しにここに来た人のために、あなたは通常URLの最後に.map
を追加することによってそれらを見つけることができます:
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css.map
必ず、使用しているバージョンのBootstrapに置き換えてください。
CSSマップファイルとは何ですか?
それはCSSファイルをそのソースファイル、通常Less、Saas、Sylusなどのプリプロセッサで書かれたファイルにリンクするJSONフォーマットファイルです。これはWebブラウザからソースファイルへのライブデバッグをするためです。
CSSプリプロセッサとは何ですか?例:Saas、Less、Stylus
これは、CSSを強力かつ迅速に生成するためにプログラミング能力を使用するCSSジェネレータツールです。
Bootstrap 3.xでマップファイルが見つからないのはなぜだろう。正しいバージョンがインストールされていることを確認してください。探していた目的の効果を得るには、3.3.7をロードする必要がありました。