LaravelでSassを反映させる方法と反映されない時の対処

はじめに

LaravelでSassを導入する流れと、実際に私がbladeに反映されずつまづいて改善した流れを書いていきます！　　
※既にnpm installが実行された後の内容です。

この記事の内容

• Sass導入の流れ
• Sassが反映されない時の対処

環境

• Docker
• Laravel8.48.2

Sass導入手順

• webpack.mix.jsの確認

最初は以下のようなコードになっているかと思います。

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .sourceMaps();

resources/sass/app.scssがpublic/cssのapp.cssに変換されるってわけですね。

• bladeファイルのhead内でlinkタグを確認

    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">

CSSはcss/app.cssを読み込みにいくよってわけですね。

• sass/app.scssを確認

最初は以下のようなコードになっていると思います。

// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');

// Variables
@import 'variables';

// Bootstrap
@import '~bootstrap/scss/bootstrap';

ここにscssを書いていけばコンパイル後にcssとして反映されますが、画面ごとのコンポーネントに分けると気持ちいいですね。
たとえば、top画面のscssを作りたいのであれば、sassディレクトリに_top.scssというようにアンダーバーから始まるファイル名でscssファイルを作りましょう。
そして忘れてはいけないのは、app.scssにインポートしてあげてください。ちなみにアンダーバーはいりませぬ。
すると以下のようになるはずです。

// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');

// Variables
@import 'variables';
@import 'top';

// Bootstrap
@import '~bootstrap/scss/bootstrap';

さて、それではコンパイルしましょう〜！

• npm run devの実行
  webpack.mix.jsのあるディレクトリでnpm run devを実行すれば、public/app.cssにコンパイルされているはずです。
  画面も見て、cssが反映されているか確認しましょう。
  ちなみにnpm run watchで自動コンパイルしてくれるので便利。ページ更新するだけで確認が済みます。

しかし私の場合、コンパイルはされているがcssが反映されてないという状態に・・・

CSSが反映されない時の対処

• キャッシュをクリアする

npm cache clean -fでキャッシュをクリアしてみましょう。

• デベロッパーツールでlinkタグを見て、ソースを確認
  app.cssの内容が確認できると思いますが、ちゃんとコンパイルされてるでしょうか？
  私の場合、ここで反映されていないことが分かったので、リロードして解消しました。

• version()をwebpack.mix.jsに足してあげる
  ※私の場合、別件エラーが出てコンパイルしなかったので.vue()付け足して解消してます。

mix.js('resources/js/app.js', 'public/js').vue()
    .sass('resources/sass/app.scss', 'public/css')
    .version()
    .sourceMaps();

これでキャッシュを自動更新するようになります。

おわりに

sassが反映されない原因は色々ありそうですが、この記事で解消できれば幸いでございます。
以上