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

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

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

 

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

 

設定の前に注意事項

 

1)

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

 

2)

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

例)

AddHandler imap-file imagemap

ファイル名例)
image.imagemap

 

設定方法

 

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

RemoveHandler map

 

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

 

 

関連タグ: 

この記事をシェアする:

Author
この記事を書いた人:阿部 正幸

KDDIウェブコミュニケーションズ
クラウドホスティング事業本部 エバンジェリスト

CPIスタッフブログ編集長。ACE01,SmartReleaseをリリース後、現職の「エバンジェリスト」として、web制作に関する様々なイベントに登場

Line@登録よろしくお願いします

Web制作に関する情報や、CPIノベルティのプレゼント、サーバーの無償提供などを定期的に発信しています。
ぜひ、登録ください。