Laravel5.5 Bootstrap4のSassを使ってみる

概要

Bootstrap4を仕事で使うことになりそうなので、下調べをする。
アプリはLaravel5.5で開発予定なので、Laravel-Mixでアセットのコンパイルができるところまでを目標とする。

※Laravel-MixとかSassとかまともに使ったことはないので、間違ったことを言っていたら指摘していただけると助かります。

環境

Laravel 5.5.2
PHP 7.1.7
node v6.11.1
npm 3.10.10

手順

1. package.json修正（bootstrap4追加、bootstrap-sass削除）
2. bootstrap本体を読み込む_bootstrap.scssを作成
3. app.scss修正
4. アセットのコンパイル

package.json修正

デフォルトで設定されているbootstrap-sassは、bootstrap４に未対応（2017/9/5時点）のため、削除して、メインリポジトリ？のものを使用する。
※修正後に「npm install」してください。

package.json

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "axios": "^0.16.2",
- 削除   "bootstrap-sass": "^3.3.7",
+ 追加   "bootstrap": "^4.0.0-alpha.6",
        "cross-env": "^5.0.1",
        "jquery": "^3.1.1",
        "laravel-mix": "^1.0",
        "lodash": "^4.17.4",
        "vue": "^2.1.10"
    }
}

_bootstrap.scssを作成

node_modules/bootstrap/scss/bootstrap.scssを丸々コピー。コピーしてパスを書き換える。
もし、使用する予定のないコンポーネントがあるなら外す。

resources/assets/sass/_bootstrap.scss

@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";
@import "~bootstrap/scss/print";
@import "~bootstrap/scss/reboot";
@import "~bootstrap/scss/type";
@import "~bootstrap/scss/images";
@import "~bootstrap/scss/code";
@import "~bootstrap/scss/grid";
@import "~bootstrap/scss/tables";
@import "~bootstrap/scss/forms";
@import "~bootstrap/scss/buttons";
@import "~bootstrap/scss/transitions";
@import "~bootstrap/scss/dropdown";
@import "~bootstrap/scss/button-group";
@import "~bootstrap/scss/input-group";
@import "~bootstrap/scss/custom-forms";
@import "~bootstrap/scss/nav";
@import "~bootstrap/scss/navbar";
@import "~bootstrap/scss/card";
@import "~bootstrap/scss/breadcrumb";
@import "~bootstrap/scss/pagination";
@import "~bootstrap/scss/badge";
@import "~bootstrap/scss/jumbotron";
@import "~bootstrap/scss/alert";
@import "~bootstrap/scss/progress";
@import "~bootstrap/scss/media";
@import "~bootstrap/scss/list-group";
@import "~bootstrap/scss/close";
@import "~bootstrap/scss/modal";
@import "~bootstrap/scss/tooltip";
@import "~bootstrap/scss/popover";
@import "~bootstrap/scss/carousel";
@import "~bootstrap/scss/utilities";

app.scss修正

resources/assets/sass/app.scss

// Fonts
@import url("https://fonts.googleapis.com/css?family=Raleway:300,400,600");

// Variables
@import "variables";

// Bootstrap
# ここを修正
# @import "~bootstrap-sass/assets/stylesheets/bootstrap";
@import "bootstrap";

アセットのコンパイル

npm run dev

補足

JSも修正が必要だと思いますが、力尽きたので後日追記します。