web-dev-qa-db-ja.com

bootstrap 3.xで使用されている.mapファイルは何ですか?

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

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

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

409
wetjosh

From Chrome DevToolsでCSSプリプロセッサを扱う

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

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

412
Steve Jansen

エラーを取り除きたいだけなら、bootstrap.cssの次の行も削除できます。

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

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

66
davidism

ブートストラップCSSはLessによって生成されます。マップファイルの主な目的は、cssソースコードをchrome devツールのより少ないソースコードにリンクするために使用されます。私たちがしていたように。もし私たちがchrome devツールの中の要素を調べるなら。あなたはCSSのソースコードを見ることができます。ただし、ブートストラップCSSファイルを含むページにマップファイルを含めます。調べたい要素スタイルに適用されるコードが少なくて済みます。

9
Joe.wang

パフォーマンスに影響を与えることなく、コードを組み合わせて縮小した後でも、クライアントサイドのコードを読みやすく、より重要なことにデバッグ可能にしておくことを望んだことはありますか。さて、あなたはソースマップの魔法を通して可能です。

この記事 は実用的なアプローチを使ってソースマップを説明します。

8

私のようにこれらのファイルを探しにここに来た人のために、あなたは通常URLの最後に.mapを追加することによってそれらを見つけることができます:

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

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

5
Travis Heeter

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

それはCSSファイルをそのソースファイル、通常Less、Saas、Sylusなどのプリプロセッサで書かれたファイルにリンクするJSONフォーマットファイルです。これはWebブラウザからソースファイルへのライブデバッグをするためです。

CSSプリプロセッサとは何ですか?例:Saas、Less、Stylus

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

2
Shadi Namrouti

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

0
TheJoe