LaravelにSCSSの導入方法

前提

• Laravelのプロジェクトは作られている
• Laravelのバージョンは6.2を使用している

手順

1. Laravelプロジェクト配下でnpm installのコマンドを実行する

2. sassメソッドでSassをCSSへコンパイルします

   • プロジェクト配下のwebpack.mix.jsに確認をする

webpack.mix.js

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

この一行でwebpackがresources/sass/app.scssファイルをpublic/css/app.cssにコンパイルしてくれる

3.npm run devでコンパイルする。

• npm run watchコマンドだと、app.scssファイルに変更が加わると自動でコンパイルしてくれるから便利！

4.app.cssを読み込む

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

app.cssが読み込まれる