2018.04.07

Nuxt.jsアプリにBootstrap 4を導入する

目次

  1. プロジェクト作成
  2. nuxt.config.js
  3. css
  4. modules
  5. SCSSファイル
  6. カスタマイズ
Open

Nuxt.js アプリにBootstrap 4を導入し SCSS でカスタマイズする方法を紹介します。

プロジェクト作成

まずは create-nuxt-app コマンドで新しいプロジェクトを作成します。

create-nuxt-app は Nuxt アプリの環境を対話的に簡単に構築できるCLIツールです。

? Use a custom UI framework と聞かれるところで bootstrap を選択しましょう。 依存ライブラリとして bootstrap-vue がインストールされます。

$ npx create-nuxt-app nuxt-bootstrap
npx: 307個のパッケージを21.094秒でインストールしました。
> Generating Nuxt.js project in /Users/masahiro.harada/Projects/qiita/nuxt-bootstrap
? Project name nuxt-bootstrap
? Project description My marvelous Nuxt.js project
? Use a custom server framework express
? Use a custom UI framework bootstrap
? Choose rendering mode Universal
? Use axios module no
? Use eslint yes
? Author name Masahiro Harada
? Choose a package manager npm

SCSSを使用するために node-sass と sass-loader もインストールします。

$ npm install --save-dev node-sass sass-loader

nuxt.config.js

nuxt.config.js に設定を追記しましょう。

nuxt.config.js 
css: [
  '@/assets/scss/app.scss'
],

modules: [
  ['bootstrap-vue/nuxt', { css: false }]
],

css

Nuxt.js ではグローバルに適用したい（すべてのページにインクルードしたい）CSS ファイル/モジュール/ライブラリを設定できます。

引用元：https://ja.nuxtjs.org/api/configuration-css#css-%E3%83%97%E3%83%AD%E3%83%91%E3%83%86%E3%82%A3

css オプションに指定されたスタイルファイルの内容は、HTML の <head> タグに出力されます。SCSS など CSS への変換が必要なメタ言語の場合、自動的に適切なプリプロセッサによる変換処理が行われます。ただし、事前にプリプロセッサおよび Webpack ローダーがインストールされている必要があります。前段で node-sass と sass-loader をインストールしたのはそのためです。

modules

プロジェクトが作成された時点ですでに modules には 'bootstrap-vue/nuxt' が追加されていますが、さらに css オプションを false に指定しましょう。

デフォルト、つまり css が true の場合、'bootstrap-vue/nuxt' は Bootstrap のスタイルを HTML の <head> タグに出力します。css オプションに指定したカスタム SCSS ファイル assets/scss/app.scss の中で Bootstrap をインポートするので、二重に Bootstrap のスタイルを読み込ませないために { css: false } を記述します。

参考：https://bootstrap-vue.js.org/docs#nuxt-js

SCSSファイル

次にSCSSファイルを作成します。

node_modules 内の bootstrap.scss をインポートする、という内容の記述です。

assets/scss/app.scss 
@import '~bootstrap/scss/bootstrap';

ここまでで動作を確認しましょう。

pages/index.vue 
<template>
  <section class="container">
    <h1 class="h1">Nuxt Bootstrap</h1>
    <b-button variant="primary">Primary Button</b-button>
  </section>
</template>

開発サーバを起動して、http://127.0.0.1:3000 にアクセスしてください。

$ npm run dev

↓

Screenshot-nuxt-bootstrap.png

カスタマイズを施していないのでデフォルトのままですが、とりあえず Bootstrap のスタイルが適用されていることが確認できます。

カスタマイズ

assets/scss/app.scss に変数を追記してカスタマイズしていきます。

assets/scss/app.scss 
$green: #16C6C0;
$primary: $green;

@import '~bootstrap/scss/bootstrap';

Screenshot-nuxt-bootstrap-2.png

別パターン。

assets/scss/app.scss 
$red: #F46272;
$primary: $red;

@import '~bootstrap/scss/bootstrap';

Screenshot-nuxt-bootstrap-3.png

以上、Nuxt.js アプリにBootstrap 4を導入し SCSS でカスタマイズする方法を紹介しました。

Bulma など他の CSS フレームワークも同様の方法で導入〜カスタマイズできます。