2018.04.07

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


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-sasssass-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-sasssass-loader をインストールしたのはそのためです。

modules

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

デフォルト、つまり csstrue の場合、'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 フレームワークも同様の方法で導入〜カスタマイズできます。