Laravelのscss(background)で画像を読み込ませたい

SCSSに画像を読み込ませたい

cssで画像を読み込ませたい

background: url("../../../public/img/lp/icn-check.png") no-repeat
                5px 40%;

たったこれだけに少し苦戦をしたので、アウトプットしておきたいと思います。

webpack.mix.jsを編集

まずwebpack.mix.jsを編集します。

webpack.mix.js

mix.js("resources/js/app.js", "public/js")
    .sass("resources/sass/app.scss", "public/css")
    .options({
        processCssUrls: false
    });

ポイントをそれぞれみます。

.sass("resources/sass/app.scss", "public/css")

"public/css"をつけて、cssの保存先のフォルダを指定します。
詳細
そして、oputinsを付与します。

optionsを付与

.options({
      processCssUrls: false
   });

これをつけない場合、通常下記のようになる。

css

.example {
  background: url(/images/example.png?d41d8cd98f00b204e9800998ecf8427e);
}

こうなると指定した画像名と異なるため、画像を読み込めない。
なので、processCssUrls: falseにする。

ファイルを指定する。

さあ、準備ができました。
あとは画像を指定するだけです。
ここから重要です。

scssファイルの階層は、
アプリ名/resources/sass/lp/top.scss

画像ファイルの階層は、下記に入れたとします（人によります）。
アプリ名/public/img/lp/icn-check.png

画像はresourcsフォルダの兄弟ディレクトリである、publicフォルダに入れています。
そのため、上の階層に戻す必要があります。

なので、階層を戻していきます。
アプリ名/resources/sass/lp/top.scssなので、3階層戻ります。

background: url("../../../");

これでresourcesの親階層になります。resourcesの兄弟ディレクトリである、publicフォルダを指定したいので、

background: url("../../../public/");

あとは画像を入れているフォルダを指定してやればいいので、

background: url("../../../public/img/lp/icn-check.png") no-repeat 5px 40%;

となります。

はじめはpublic/cssを読み込んでいると思っていましたが、そうではなくsassファルダから画像フォルダまでのパスを記載してやる必要がありました。