Laravelでscssを使いてぇ

環境
OS:macOS Montery
PHP: PHP 8.1.4
Laravel: Laravel Framework 8.83.8
MySQL : 5.6.38 - MySQL Community Server (GPL)
Node.js: 14.17.6
npm: 6.14.15

scssを記述するファイルを作る

/resouses/sassフォルダを開く
するとapp.scssが存在していると思うので、
同じフォルダ内(sassフォルダ内)に

_style.scss
を新規ファイルで作成

さっき作ったファイルを読み込む

app.scssを開いて
@import 'style';
を追記

_style.scssに適当に書いていく

_style.scss

.loginMainView{
  background-color: #e9ecef;
}

コンパイルする

ターミナルで以下コマンド実行

npm run dev

これでエラーが出なければ
public/css/app.cssに反映されてるはず！

background-imageなど画像パスを指定したい場合

完成イメージはこんな感じです。

  // publicフォルダのapp.cssから見てのパスを指定する
background: url(../img/IMG.JPG) center/cover;

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")

上記は
「resources/sass/app.scssをコンパイルしたとき、
public/cssに反映させます」
という意味。

 .options({
     processCssUrls: false
 });

これをつけないと、以下のようになって、パスの指定がややこしいです。

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

ファイルを指定する

画像ファイルの階層
アプリ名/public/img/IMG.JPG

app.cssの階層
アプリ名/public/app.css

app.cssから見てIMG.JPGの場所を指定するので、

../img/IMG.JPG

となります。

結果こんな感じ

background: url(../img/IMG.JPG) center/cover;