13 章：デザイン調整

デザインを整える

以前までは、デザインが全くなかったもんな。

今回は少しデザインを整えていきましょう。
まずは、webpack.mix.js を編集していきます。

//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.js('resources/js/app.js', 'public/assets/js')
   .sass('resources/sass/app.scss', 'public/assets/css');

Laravel 6.x アセットのコンパイル(Mix)
https://readouble.com/laravel/6.x/ja/mix.html

mix.js( ‘ ビルド前のコード ‘, ‘ビルド後のコードの格納先’ )
上記のようになっております。

resources/js/app.js 及び resources/sass/app.scss を確認すると、ビルド前のコードを確認することができます。

それでは実際にビルドしてみましょう。

2ch % npm run dev

 DONE  Compiled successfully in 6459ms                                                                        16:03:20

              Asset      Size          Chunks             Chunk Names
/assets/css/app.css   180 KiB  /assets/js/app  [emitted]  /assets/js/app
  /assets/js/app.js  1.41 MiB  /assets/js/app  [emitted]  /assets/js/app

上記のような表示が出ればビルド完了です。
では実際にビルド後のファイルも確認してみましょう。

/public/assets/js/app.js

/******/ (function(modules) { // webpackBootstrap
/******/ 	// The module cache
/******/ 	var installedModules = {};
/******/
/******/ 	// The require function
/******/ 	function __webpack_require__(moduleId) {
/******/
/******/ 		// Check if module is in cache
/******/ 		if(installedModules[moduleId]) {
/******/ 			return installedModules[moduleId].exports;
/******/ 		}

// 略

非常に長いコードが書かれたファイルになっています。
/public/assets/css/app.css に関しても同様にかなり長いコードが書かれたファイルになっていますね。

上記のファイルは git の管理から外しましょう。
（ npm run dev をすればどの環境でも手に入るファイルであるため、git 管理する必要がない）

.gitignore

/node_modules
/public/hot
/public/storage
/storage/*.key
/vendor
.env
.env.backup
.phpunit.result.cache
Homestead.json
Homestead.yaml
npm-debug.log
yarn-error.log
public/assets/js
public/assets/css

また、上記ビルドしたファイルを blade で読み込むために下記を変更しましょう。

resources/views/layouts/app.blade.php

// 変更前
<script src="{{ asset('js/app.js') }}" defer></script>

// 変更後
<script src="{{ mix('assets/js/app.js') }}" defer></script>

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

// 変更後
<link href="{{ mix('assets/css/app.css') }}" rel="stylesheet">

2箇所変更しました。
こちらで、ビルドが完了した app.js と app.css を読み込めるようになりましたね。

scss を追加する

では次にデザインを整えるために、scss を追加していきます。

resources/sass/_variables.scss

// Body
$body-base-color: #dae0e6;

// Typography
$font-family-sans-serif: 'Nunito', sans-serif;
$font-size-base: 0.9rem;
$line-height-base: 1.6;

// Colors
$blue: #39F;
$indigo: #6574cd;
$purple: #9561e2;
$pink: #f66d9b;
$red: #e3342f;
$orange: #f6993f;
$yellow: #ffed4a;
$green: #38c172;
$teal: #4dc0b5;
$cyan: #6cb2eb;
$white: #eeeeee

resources/sass/base/_base.scss

body {
    background-color: $body-base-color;
}

.btn-primary {
    background-color: $blue;
}
.badge-primary {
    background-color: $blue;
    border-radius: 1rem;
}
.btn-danger {
    background-color: $white;
    color: #e3342f;
}
.card-header {
    background-color: $white;
    border: none;
}

.card-footer {
    background-color: $white;
}

resources/sass/app.scss

/// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');

// Variables
@import 'variables';

// Bootstrap
@import '~bootstrap/scss/bootstrap';

// Base
@import 'base/base';

それでは、scss の追加が完了したので、再度ビルドを行いましょう。
こちらのビルドを行わないと、反映がされません。

2ch % npm run dev

 DONE  Compiled successfully in 6459ms                                                                        16:03:20

              Asset      Size          Chunks             Chunk Names
/assets/css/app.css   180 KiB  /assets/js/app  [emitted]  /assets/js/app
  /assets/js/app.js  1.41 MiB  /assets/js/app  [emitted]  /assets/js/app

Header の位置を固定する

app.blade.php

// 省略
<body>
    <div id="app">
        <nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm sticky-top"> // sticky-top を追加。 

// 省略