毎回起こるCSSの競合がヤバイ

毎回起こるCSSの競合がヤバイ

こんにちは。ひっでもんです。

今回は、マージするたびに毎回起こる「CSSの競合」の解決方法をご紹介します。
config.rbを少し編集するだけで競合が無くなるのでぜひお試しください。

 

毎回CSSで競合が起こる理由はSCSSなどでimage-urlを使用した際にURL末尾につくタイムスタンプパラメータが更新されることが原因で起こります。

そこで、タイムスタンプパラメータを使わない方向で競合を解決させる3つの方法を紹介します。

 

解決方法1 タイムスタンプパラメータをオフにする。

background: image-url(); を使用したときに自動的にタイムスタンプを付加するかどうかを制御できる。(デフォルトだと付加される。)

上記記述を追加することでタイムスタンプパラメーターがつかなくなる。

[例:../image/text.png]

※デメリット:キャッシュ利用できない

 

解決方法2 任意の文字列をパラメータに設定

画像URL末尾に指定した文字列が追記される。

[例:../image/text.png?hoge]

※デメリット:画像更新があるたび手動で文字列を変更して全SCSSファイルをコンパイルする必要がある

 

解決方法3 タイムスタンプパラメータをやめてMD5パラメータを使用する。

各画像ファイルがもつMD5パラメーターを取得し8文字に切り取ってパラメータとして使用する。そのため画像がさし替わった場合のみパラメータが変更される。

[例:../image/text.png?2438ghf3]

※デメリット:画像の差し替え作業のみの場合でも、その画像を呼び出しているSCSSファイルを更新する必要がある。

 

まとめ

ブランチをマージするたびに起きていたCSSの競合を無くし、スムーズなマージを心がけましょう。

個人的に一番オススメは解決方法3の 「MD5パラメータを使用する」 です。

ぜひお試しください。


Previous: Firebaseを使ってみたい Next: Photoshopでかんたん画像補正!色かぶりの修正方法 ~自動カラー補正篇~

© 2017 ALL CONNECT Inc. All Rights Reserved.