はじめに
入門の入門ぐらいの感じで、導入してみようと思います。
公式リポジトリのREADMEからリンクされているGetting Startedを読んで、ちょっとCSSを適用してみます。
公式リポジトリ
Getting Started
プロジェクトディレクトリ作成
sample-material-components-web ディレクトリを作成してサンプルを作成していこうと思います。
mkdir sample-material-components-web
Getting Startedのとおりやってみる
以下の通り実行していきました。
index.htmlを確認する
ボタンをクリックすると波紋状のアニメーションが起こるようになりました。
ここまでやってsample-material-components-webディレクトリのファイル構成
2018年6月9日現在、公式のGetting Startedの通り実行していくと以下のようになりました。
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'] } }] }, });