LoginSignup
16
20

More than 3 years have passed since last update.

LaravelにSCSSの導入方法

Last updated at Posted at 2019-12-17

### 前提
* 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が読み込まれる

16
20
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
16
20