vue-pwa-boilerplateにvue-materialとscssを追加する #Vue.js

vue-pwa-boilerplateにvue-materialとscssを追加します。

vue-materialの追加

パッケージのインストール

npm install vue-material --save

Googleフォント・アイコンの読み込み

index.html


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">

    <!-- 省略 -->

    <!-- Google icons and fonts for vue-material -->
    <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
    <link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">
  </head>

  <body>
    <noscript>
      This is your fallback content in case JavaScript fails to load.
    </noscript>
    <div id="app"></div>
    <!-- Todo: only include in production -->
    <%= htmlWebpackPlugin.options.serviceWorkerLoader %>
    <!-- built files will be auto injected -->
  </body>
</html>

下記を追加してあります。

    <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
    <link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">

Cardコンポーネントの追加

http://vuematerial.io/#/components/card
こちらにあるComplete Exampleをそのままコピーして追加してみます。

Card.vue

<template>
  <md-card class="card-example">
    <md-card-area md-inset>
      <md-card-media md-ratio="16:9">
        <img src="../../assets/images/card-example.jpg" alt="Coffee House">
      </md-card-media>

      <md-card-header>
        <h2 class="md-title">Coffee House</h2>
        <div class="md-subhead">
          <md-icon>location_on</md-icon>
          <span>2 miles</span>
        </div>
      </md-card-header>

      <md-card-content>
        Illy Coffee served with a complimentary Leonidas Belgian Chocolate with all beverages.
      </md-card-content>
    </md-card-area>

    <md-card-content>
      <h3 class="md-subheading">Today's availability</h3>
      <div class="card-reservation">
        <md-icon>access_time</md-icon>
        <md-button-toggle md-single class="md-button-group">
          <md-button>5:30PM</md-button>
          <md-button>7:30PM</md-button>
          <md-button>9:00PM</md-button>
        </md-button-toggle>
      </div>
    </md-card-content>

    <md-card-actions>
      <md-button class="md-primary">Reserve</md-button>
    </md-card-actions>
  </md-card>
</template>

<script>
export default {
  name: 'card-example',
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.card-example {
  width: 95%;
  margin: auto;

  .md-subhead {
    .md-icon {
      $size: 16px;

      width: $size;
      min-width: $size;
      height: $size;
      min-height: $size;
      font-size: $size;
      line-height: $size;
    }

    span {
      vertical-align: middle;
    }
  }

  .card-reservation {
    margin-top: 8px;
    display: flex;
    align-items: center;
    justify-content: space-around;

    .md-icon {
      margin: 8px;
      color: rgba(#000, .54) !important;
    }

    .md-button {
      border-radius: 2px !important;
    }
  }
}
</style>

が、このままではきちんとビルドされません。

scssをコンパイル出来るようにする

sass-loaderとnode-sassのインストール

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

sassなの? scssなの?

Sass, SASS, SCSSの違いについては下記のリンクを参考に。
要するに、sass-loaderはcssを拡張したメタ言語のloaderという意味で、
Card.vueに書いた<style lang="scss" scoped>はSassのうち、SCSSという記法で記述しますという意味です。

webpack.config.js

vue-pwa-boilerplateに含まれているものをそのまま使えば上記の手順で済みます。
vue-loaderの設定で良い感じでやってくれている。
webpackの設定から下記を呼び出している。

vue-loader.conf.js

var utils = require('./utils')
var config = require('../config')
var isProduction = process.env.NODE_ENV === 'production'

module.exports = {
  loaders: utils.cssLoaders({
    sourceMap: isProduction
      ? config.build.productionSourceMap
      : config.dev.cssSourceMap,
    extract: isProduction
  }),
  transformToRequire: {
    video: 'src',
    source: 'src',
    img: 'src',
    image: 'xlink:href'
  }
}

utils.cssLoader側で適切なloaderが設定されます。