Help us understand the problem. What is going on with this article?

Laravel6 備忘録 −sass導入−

Laravelでsassのコンパイル設定

laravelでsassをコンパイルするための設定手順

環境

バージョン
PHP 7.2.9
Laravel 6.8.0
Node 8.11.4
npm 6.4.0
terminal
## phpのバージョン
vagrant@homestead:~/code/myapp$ php -v
PHP 7.2.9-1+ubuntu18.04.1+deb.sury.org+1 (cli) (built: Aug 19 2018 07:16:54) ( NTS )
Copyright (c) 1997-2018 The PHP Group
Zend Engine v3.2.0, Copyright (c) 1998-2018 Zend Technologies
    with Zend OPcache v7.2.9-1+ubuntu18.04.1+deb.sury.org+1, Copyright (c) 1999-2018, by Zend Technologies
    with blackfire v1.22.0~linux-x64-non_zts72, https://blackfire.io, by Blackfire

## laravelのバージョン確認
vagrant@homestead:~/code/myapp$ php artisan --version
Laravel Framework 6.8.0

## nodeの存在確認
vagrant@homestead:~/code/myapp$ node -v
v8.11.4

## npmの存在確認
vagrant@homestead:~/code/myapp$ npm -v
6.4.0

導入手順

laravelでsassをコンパイルするにはwebpackを利用する
webpackを利用するためには、まずnode.jsとnpmを導入する必要がある

terminal
vagrant@homestead:~/code/myapp$ node -v ## node.jsのバージョンの確認
v8.11.4
vagrant@homestead:~/code/myapp$ npm -v ## npmのバージョンの確認
6.4.0

Laravel/Mixをインストール

terminal
vagrant@homestead:~/code/myapp$ npm install

buildする元のファイルを作成(作成場所に注意)

scss
resources/assets/sass配下にscssファイルを作成(今回はstyle.scssを作成)
javascript
resources/assets/js配下にjsファイルを作成(今回はmain.jsを作成)

Laravel Mixの設定

初期設定のファイル

webpack.mix.js
// 初期設定
let mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

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

設定後のファイル

webpack.mix.js
// 設定後
const mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.sass('resources/sass/app.scss', 'public/css')
.sass('resources/assets/sass/_base.scss', '../resources/assets/build/css') // importファイルは逐一追加する(しないとwatch-pollで監視できない)
   .sass('resources/assets/sass/style.scss', 'public/css/style.css') // assets/sass配下のstyle.scssを、public/css配下にstyle.cssとしてコンパイル
   .js('resources/js/app.js', 'public/js')
   .js('resources/assets/js/test.js', 'public/js'); // assets/js配下のmain.jsを、public/js配下にmain.jsとしてコンパイル

ビルド(コンパイルを実行)する

ビルドするときはnpmコマンドで行う

terminal
## 変更ごとにビルド(開発用)
vagrant@homestead:~/code/myapp$ npm dev

## scssファイル変更を検出して自動でビルド
vagrant@homestead:~/code/myapp$ npm run watch
vagrant@homestead:~/code/myapp$ npm run watch-poll ## うまくいかない場合はこちら

## 本番用にビルド(ビルドに加えてファイル圧縮も行う)
vagrant@homestead:~/code/myapp$ npm production
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした