Sage 9 でCSSの背景画像を認識しない問題を解決

WordPressスターターテーマ―であるSage 9において、CSSの背景画像が正しいパスであっても認識しない。

この問題は2021年3月時点で最新版のバージョンであるSage9.0.10で発生しており、解決するためにはSage9.0.9にダウングレードするしかないらしい。

具体的に原因はSage9.0.10に含まれてるresolve-url-loaderのバグらしい。

Sage9.0.9にダウングレードすることによって含まれてるパッケージもダウングレードすることで解決する。

ダウングレード方法は簡単でnode_modulesのフォルダを一括削除し、バージョンを指定した上で再度Sageをインストールし直す

composer create-project roots/sage theme-name 9.0.9

theme-nameの部分は自分が設定したいテーマ名に適宜変更。

ちなみにSage9.0.9のインストールはnodeのバージョンが新し過ぎるとエラーとなってしまうため、v10.13.0でのインストールをおすすめする。

ちなみにCSSの背景画像の正しいパスは以下の通り

.test {
  background-image: url('../images/file-name.jpg');
}

参考:https://discourse.roots.io/t/relative-paths-to-images-in-css-doesnt-work-anymore-ie-background-image-path/19431