はじめに
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が反映されない原因は色々ありそうですが、この記事で解消できれば幸いでございます。
以上
↧