laravelでscssを使いたい

Question

やりたいこと

home.scssというファイルをhtml??に適応させたいため、Laravel(5.7)でscssを使う方法を勉強しています！

https://readouble.com/laravel/5.7/ja/mix.html

それで、上記のサイトにて、勉強しているのですが、わからないところがあったため、質問しました！

質問

1.僕が使いたいファイルはhome.scssです。このファイルは/resources/sassに置いて置けば良いのでしょうか？拡張子がsassじゃなくてscssなので不安だっため質問しました。

2..htmlのcssファイル指定コード<link rel="stylesheet" href="style.css">のようにファイルは指定しなくても勝手に適応されるのでしょうか？

3.webpack.mix.jsのコードはこれで合っていますか？

const mix = require('laravel-mix');

4.webpack.mix.jsのコードを更新した後、なにか行うことはありますか？

###　よろしくお願いします！

Comments

[xenbeat]

Teratailに慣れてないかと思いますが、質問をわけられたほうが回答が付きやすいかと思います。１投稿に複数質問があると回答者の負担が大きく敬遠されることもあります。

Answer 1

1.僕が使いたいファイルはhome.scssです。このファイルは/resources/sassに置いて置けば良いのでしょうか？拡張子がsassじゃなくてscssなので不安だっため質問しました。

どこのディレクトリに置くかはwebpack.mix.jsの設定次第で如何ようにもできますが、公式のドキュメントを見てもsassディレクトリ以下にscssファイルを置いているようなので問題ないと思います。

2..htmlのcssファイル指定コード<link rel="stylesheet" href="style.css">のようにファイルは指定しなくても勝手に適応されるのでしょうか？

ファイルを指定しないと読み込まれません。デフォルトにも記述があると思いますが、
<link rel="stylesheet" href="{{ mix('css/app.css') }}"></script>
のような書き方で指定できます。

3.webpack.mix.jsのコードはこれで合っていますか？

書き方としてベストかはわかりませんが、動くと思います。

4.webpack.mix.jsのコードを更新した後、なにか行うことはありますか？

公式ドキュメントにも記載がありますが、
npm run devでsassがコンパイルされます。
https://readouble.com/laravel/5.8/ja/mix.html

Answer 2

補足として、scss拡張子は、Sassy CSSとしてsassにより処理されるので、sassディレクトリで問題ないです。
Laravel Mixは、専用にDocumentがあるので合わせて確認してみてください。
Laravel Mix Documentation
Laravel BladeでのMPA型の場合はBrowserSyncを使ってファイル更新を検知してライブリロードしたり、Vue.jsでのSPA型の場合は、HMR(Hot Module Replacement)を使うと開発効率があります。