モンモンブログ

技術的な話など

Nuxt.js に Materialize を導入&カスタマイズ

Nuxt.js ではプロジェクト作成時に Bootstrap などの CSS フレームワークを選択すると簡単に導入できて便利ですが、選択肢にない CSS フレームワークを使おうとするとちょっと手間です。マテリアルデザインの CSS フレームワーク Materialize を使いたかったけど選択肢になかったので導入方法を調べてみました。(マテリアルデザインにしたければ Vuetify を使えよコラっていう開発者の意図も感じますがシカトします。)

主なパッケージのバージョンはこんな感じ。

nuxt@2.6.2
materialize-css@1.0.0-rc.2

導入

プロジェクトを作ります。大体デフォルトのまま。

% yarn create nuxt-app materialize-sample
yarn create v1.15.2
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Installed "create-nuxt-app@2.6.0" with binaries:
      - create-nuxt-app
> Generating Nuxt.js project in /Users/monmon/dev/nuxtjs/materialize-sample
? Project name materialize-sample
? Project description Materialize Sample
? Use a custom server framework none
? Choose features to install
? Use a custom UI framework none    ←UIフレームワークなし
? Use a custom test framework none
? Choose rendering mode Universal   ←UniversalでもSPAでもOK
? Author name monmonmon
? Choose a package manager yarn     ←yarnじゃなきゃやーん

  To get started:

        cd materialize-sample
        yarn run dev

  To build & start for production:

        cd materialize-sample
        yarn run build
        yarn start

✨  Done in 195.34s.

必要なパッケージをインストールします。

% cd materialize-sample
% yarn add materialize-css@next

# pug を使いたいのでこれも入れる
% yarn add pug pug-plain-loader

# sass も使いたいのでこれも入れる
% yarn add node-sass sass-loader

assets/style/app.sass を作って以下を記述。

@charset 'UTF-8'

@import '@/node_modules/materialize-css/sass/materialize.scss'

plugins/materialize.js を作って以下を記述。

import '@/node_modules/materialize-css/dist/js/materialize.min.js'

nuxt.config.js を修正。修正するのは3箇所だけです。

import pkg from './package'

export default {
  mode: 'universal',

  /*
  ** Headers of the page
  */
  head: {
    title: pkg.name,
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: pkg.description }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
      // 1. Materialize のアイコンを有効化するcssを読み込み(optional)。
      // `<i class="material-icons">add</i>` のようにアイコンが使えるようになります。
      { rel: 'stylesheet', href: 'https://fonts.googleapis.com/icon?family=Material+Icons' }
    ]
  },

  /*
  ** Customize the progress-bar color
  */
  loading: { color: '#fff' },

  /*
  ** Global CSS
  */
  css: [
    // 3. 先ほど作った sass を追加。
    'assets/style/app.sass'
  ],

  /*
  ** Plugins to load before mounting the App
  */
  plugins: [
    // 3. 先ほど作った plugin を追加。
    { src: '~/plugins/materialize', ssr: false }
  ],

  /*
  ** Nuxt.js modules
  */
  modules: [
  ],

  /*
  ** Build configuration
  */
  build: {
    /*
    ** You can extend webpack config here
    */
    extend(config, ctx) {
    }
  }
}

これだけで導入完了。簡単なページ (pages/test.vue) を作って確認してみます。

<template lang="pug">
div
  nav.row
    .nav-wrapper.col.s12
      a.brand-logo(href="/") Navbar
  .container
    .row.section
      .col.s12
        p
          button.btn Button
        p
          a(href="#") Link
</template>

開発サーバを起動。

% yarn dev

http://localhost:3000/test にアクセスしてこんな感じに表示されればOK。

f:id:ymdsmn:20190422003243p:plain

色をカスタマイズ

デフォルトの色のままだと少々個性が強いですね。カスタマイズしましょう。

色は node_modules/materialize-css/sass/components/_variables.scss で sass 変数として定義されてるので、これをオーバーライドしてやればいいです。

主なsass変数 デフォルト値 用途
$primary-color .materialize-red.lighten-2 Navbar, Breadcrumb, Pagination などの色
$secondary-color .teal.lighten-1 Button などの色
$success-color .green フォームフィールド(Email や URL など)の Validation 成功時の色
$error-color .red フォームフィールドの Validation 失敗時の色
$link-color .light-blue.darken-1 リンクの色

ほとんどのコンポーネントの色は $primary-color, $secondary-color を元に生成されます(黒やグレー系の色を除く。一部例外あり)。今回はこの2つに加え $link-color も変更してみましょう。

先ほど作った assets/style/app.sass を以下のように修正します。

@charset 'UTF-8'

// Materialize の red, lighten-1, darken-2 などの色指定を使えるようにするためインポート
@import '@/node_modules/materialize-css/sass/components/_color-variables.scss'

// sass 変数をオーバーライド。color 関数でこのように指定します
$primary-color: color('blue', 'base')           // .blue
$secondary-color: color('green', 'lighten-1')   // .green.lighten-1
$link-color: color('red', 'darken-2')           // .red.darken-2

@import '@/node_modules/materialize-css/sass/materialize.scss'

red やら lighten-1 やら使わねえぜって場合はもっとシンプルに書けます。

@charset 'UTF-8'

// sass 変数をオーバーライド
$primary-color: #42A5F5
$secondary-color: #66BB6A
$link-color: #D32F2F

@import '@/node_modules/materialize-css/sass/materialize.scss'

こんな風にカスタマイズできました。やったね。

f:id:ymdsmn:20190422003225p:plain

コンポーネントごとに色を細かく指定したい場合は、各コンポーネント専用の sass 変数を node_modules/materialize-css/sass/components/_variables.scss から探して、同様にオーバーライドすればOK。例えば Badge の背景色は名前からして $badge-bg-color で設定できるっぽいですね。

以上です。