なぜ MAP を CSS に変換するのですか？
CSS ソースマップは、Sass や webpack などのツールによってコンパイルされた CSS と共に生成される JSON ファイルです。コンパイルされたスタイルシート内の位置が元のソースとどのように関連しているかを記録するもので、セレクタ、プロパティ、値などは含まれていないため、.CSS に変換できるものはありません。
MAP から CSS への変換方法
VS Code FREE
VS Code で .map ファイルを開き、sources フィールドを調べて元のファイルパスを確認するか、sourcesContent が存在する場合はそこからテキストを抽出します。
これらの形式について
.MAP
Source Map (JavaScript / CSS)
.mapファイルは、ほとんどの場合 JavaScript または CSS のソースマップです。これはブラウザのデベロッパーツール（DevTools）が、圧縮またはコンパイルされたコードの背後にある元の読みやすいソースを表示できるようにするための JSON…
.MAP の詳細を開く →
.CSS
Cascading Style Sheet
CSS ファイルは Cascading Style Sheet（カスケーディング・スタイル・シート）の略で、ウェブページの色、フォント、間隔、レイアウトを制御するプレーンテキストファイルです。VS Code や Notepad++ などのテキストエディタやコードエディタで開くことができます。CSS ファイルは単独で実行するものではなく、ブラウザがレンダリングする HTML…
.CSS の詳細を開く →品質と注意点
- コンパイルされた
.cssファイルは、同じディレクトリに同じベース名で存在します。styles.css.mapの隣にあるstyles.cssを探してください。 sourcesContentがマップ内に存在する場合、元の Sass または Less のテキストが JSON に直接埋め込まれており、コピーして取り出すことができます。.mapファイルを削除しても、エンドユーザーに対する CSS のレンダリングには影響しません。DevTools のソースマッピングが削除されるだけです。
よくある質問
なぜ `.map` ファイルは CSS ファイルと同じ名前なのですか？
ビルドツールは慣習として、ソースマップにその対応する CSS と同じ名前を付けます。CSS ファイルの末尾には、
.map を指し示すコメントが含まれています。本番サーバー上の `.map` ファイルを削除しても安全ですか？
はい - 削除してもレンダリングには影響せず、元の Sass や Less ソースがブラウザの DevTools で公開されるのを防ぐことができます。
`.map` ファイルから元の Sass ソースを見つけるにはどうすればよいですか？
任意のテキストエディタで
.map を開き、sources 配列を確認してください。そこには CSS がコンパイルされた元のファイルパスがリストされています。
