CPIサーバーでSassなどのSource Mapが使えない対処法方

2022年4月28日 16:58 更新｜2017年3月 9日 13:00 公開

Source Mapを使うと、SassやLess、TypeScriptなどで、コンパイルされ難読化されたコードが、オリジナルファイルの何行目に書かれているかを確認することができます。

例では ID: mainに設定したスタイルがオリジナルファイルの「style.scss」の7行目に書かれていることが分かるかと思います。

しかしCPIサーバーではSource Mapが正しく動作しません。

「Webサイトからお問い合わせが来ない…」とお悩みの方必見！
当サイトのノウハウを詰め込んだ『Web集客の無料ガイド』をご提供

設定の前に注意事項

１）

CPIサーバーで、Source Mapを使うためには .htaccessの設定変更が必要です。
.htaccessファイルは記述を間違えますとWebサイトが停止していまう恐れがあります。必ずテスト環境で試してから、本番に反映してください。

２）

この設定を反映するとイメージマップが使用できなくなります。Source Mapと、イメージマップを両方使いたい場合は、下記の行を「.htaccess」に追加し、イメージマップで使っているファイルの拡張子を変更してください。

例）

ファイル名例）
image.imagemap

CPIサーバーでSource Mapを使う場合は、「.htaccess」に下記の行を追加する必要があります。
（.htaccessファイルが無い場合は、新規作成してください）

設定は以上です。上記設定を反映しても、Source Mapが正しく表示されない場合は、ブラウザのキャッシュを一度削除してください。