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をプロダクトマネージャーとしてローンチし、エバンジェリストとしてイベント登壇を行う。
現在は、KDDIウェブコミュニケーションズを退職し、モチヤ株式会社で、Web制作、受託開発、コンサルティングを行なっている。