laravel+Vue-cliにBootstrap4 の導入とscssを使えるようにする

はじめに
Bootstrap4の導入
グローバルなscssを読み込む
今後の予定

はじめに

前回、laravelとVue-cliプロジェクトを連携させることができました。今回はwebアプリの見た目を作っていくためにBootstrap4の導入を行ます。また、scssファイルを使えるようにするためscss-loaderをインストールしてscssファイルの読み込みをしてみます。

フォルダの構成はlaravelとVue-cliプロジェクトを連携するためにいじっているので前回の記事を参考にしてください。

[related id="381" label="前回の内容"]

Bootstrap4の導入

Bootstrap4をインストールします。作業をするのはVue-cliプロジェクトのディテクトリです。

~/my-vuecli

npm install vue bootstrap-vue bootstrap

インストールをしただけでは使えません。インストールするとnode_modulesにbootstrapフォルダが作成され、中にcssファイルなどが入っています。そこから必要なファイルをエンドポイント（main.js）で読み込みます。

src/app/main.js

//BootstrapVueを登録
import BootstrapVue from 'bootstrap-vue'//追加

//BootstrapおよびBootstrapVue cssファイルをインポート
import 'bootstrap/dist/css/bootstrap.css' //追加
import 'bootstrap-vue/dist/bootstrap-vue.css'//追加

new Vue({
  router,
  store,
  BootstrapVue, //追加
  render: h => h(App)
}).$mount('#app')

グローバルなscssを読み込む

scssが使えるようにする。

my-vuecli

npm add -D node-sass sass-loader

読み込むscssファイルの準備。assetsフォルダに下記のようなファイル構成を作る。

scssのファイル構成

src/
└ app/
   └ assets/
     └ style/
       ├ layout/
       |  ├ _layout.scss
       |  ├ _header.scss
       |  └ _footer.scss
       |
       |- module/
       |  ├ _button.scss
       |  └ _sidebar.scss
       |
       |- pages/
       |  ├ _home.scss
       |  └ _quiz.scss
       |
       |- setting/
       |  ├ _media.scss
       |  └ _variable.scss
       |
       ├ main.scss
       └ prepends.scss

一つずつscssファイルを読み込んでいくのではなく、prepend.scssとmain.scssに振り分けてまとめ、そのprepend.scssとmain.scssを読み込めばいい。

prepend.scssの作成と読み込み

全.vueファイルにインポートしたい（具体的なcssを吐かない）ものはprepends.scssに入れる。

prepend.scss

@import "./setting/variables";
@import "./setting/media";
@import "./layout/layout";
@import "./layout/header";
@import "./layout/footer";
@import "./module/button";
@import "./module/sidebar";

vue.config.jsに追記して読み込む。

css: {
  loaderOptions: {
    scss: {
      prependData: '@import "./src/app/assets/style/prepends.scss";'
    }
  }
},

main.scssの作成と読み込み

具体的なcssを出力するものはmain.scssに入れる。

main.scss

@import “./pages/home”;
@import “./pages/quiz”;

main.jsに追記して読み込む。

main.js

require(‘@/app/assets/style/main.scss');

最後にvue-cliプロジェクトからnpm run buildすればlaravelの対応したディテクトリにcssやscssファイルが吐かれ、使えるようになります。

ハマったポイント

not foundエラーがでた。ファイルパスが正しくなかったことが原因でした。

デベロッパーツールを使って吐かれたファイルパスを確認し、修正し解決しました！

これでwebアプリケーションのデザインができるようになりました。お疲れ様でした。

今後の予定

やっとwebアプリケーションを作る環境が整ってきました。フロント側の作業は進められます。

今後は外観の作成とaxiosを使ってデータベースの連携についても勉強したいと思います。