Motomichi Works Blog

その日学習したことについて書いている日記です。誰かの役に立ったらそれはそれで嬉しいです。

material-components-web入門 その0002 導入 Getting Started

はじめに

入門の入門ぐらいの感じで、導入してみようと思います。

公式リポジトリのREADMEからリンクされているGetting Startedを読んで、ちょっとCSSを適用してみます。

公式リポジトリ

Getting Started

プロジェクトディレクトリ作成

sample-material-components-web ディレクトリを作成してサンプルを作成していこうと思います。

mkdir sample-material-components-web

Getting Startedのとおりやってみる

以下の通り実行していきました。

material-components-web/getting-started.md at master · material-components/material-components-web · GitHub

index.htmlを確認する

ボタンをクリックすると波紋状のアニメーションが起こるようになりました。

ここまでやってsample-material-components-webディレクトリのファイル構成

2018年6月9日現在、公式のGetting Startedの通り実行していくと以下のようになりました。

  • node_modules/*
  • app.js
  • app.scss
  • index.html
  • package.json
  • package-lock.json
  • webpack.config.js

app.jsの記述内容

import {MDCRipple} from '@material/ripple';
const ripple = new MDCRipple(document.querySelector('.foo-button'));

app.scssの記述内容

@import "@material/button/mdc-button";

.foo-button {
  @include mdc-button-ink-color(teal);
  @include mdc-states(teal);
}

index.htmlの記述内容

<html>
 <head>
   <link rel="stylesheet" href="bundle.css">
   <script src="bundle.js" async></script>
 </head>
 <body>
   <button class="foo-button mdc-button">
     Button
   </button>
 </body>
</html>

package.jsonの記述内容

{
  "name": "sample-material-components-web",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^8.6.1",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-preset-es2015": "^6.24.1",
    "css-loader": "^0.28.11",
    "extract-loader": "^2.0.1",
    "file-loader": "^1.1.11",
    "node-sass": "^4.9.0",
    "postcss-loader": "^2.1.5",
    "sass-loader": "^7.0.3",
    "webpack": "^3.12.0",
    "webpack-dev-server": "^2.11.2"
  },
  "dependencies": {
    "@material/button": "^0.36.0",
    "@material/ripple": "^0.36.0"
  }
}

webpack.config.jsの記述内容

const autoprefixer = require('autoprefixer');

module.exports = [{
  entry: './app.scss',
  output: {
    // This is necessary for webpack to compile
    // But we never use style-bundle.js
    filename: 'style-bundle.js',
  },
  module: {
    rules: [{
      test: /\.scss$/,
      use: [
        {
          loader: 'file-loader',
          options: {
            name: 'bundle.css',
          },
        },
        { loader: 'extract-loader' },
        { loader: 'css-loader' },
        { loader: 'postcss-loader',
          options: {
             plugins: () => [autoprefixer({ grid: false })]
          }
        },
        {
          loader: 'sass-loader',
          options: {
            includePaths: ['./node_modules']
          }
        }
      ]
    }]
  },
}];

module.exports.push({
  entry: './app.js',
  output: {
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      test: /\.js$/,
      loader: 'babel-loader',
      query: {
        presets: ['es2015']
      }
    }]
  },
});