Installation

Install Material Components Kit and required build tools.

Install Material Components Kit via npm

Material Components Kit is available on npm.

npm install --save material-components-kit

Build tools (Webpack)

Material Components Kit and MDC Web use SCSS for styling so we need to compile .scss files into CSS. We use Webpack for that purpose because it has excellent features and comes with rich plugin system. Also, we assume that you will use Webpack for bundling MDC Web’s JavaScript. Although Material Components Kit doesn’t provide any JavaScript, it would be reasonable to describe the bundling process.

JavaScript bundle (MDC Web)

Install Webpack

npm install --save-dev webpack

We need to install Babel which helps transpile edge JavaScript into specification that can run in old browsers.

npm install --save-dev babel-core babel-loader babel-preset-es2015

Then you need to add Babel configuration. The simplest way is to add it to package.json:

{
  "name": "project-name",
  "version": "0.1.0",
  "description": "Project description",
  "babel": {
    "presets": [
      [
        "es2015",
        {
          "modules": false
        }
      ]
    ]
  }
}

Create Webpack configuration file in the root of your project. Here we will describe how Webpack should bundle our files.

const path = require('path')
const webpack = require('webpack')

module.exports = [{
  name: 'js',
  entry: './src/scripts/index.js',
  output: {
    path: path.resolve(__dirname, 'dist/scripts'),
    publicPath: '/dist/scripts/',
    filename: 'app.js'
  },
  module: {
    rules: [{
      test: /\.js$/,
      loader: 'babel-loader',
      options: {
        cacheDirectory: true
      }
    }]
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin()
  ]
}]

In entry object we specify the file where our application is written. In our case it’s a ./src/scripts/index.js.

In output object we specify how webpack emits results. path is the target directory for all output files. In our case it’s a (./dist/scripts/). Webpack API requires to use absolute paths for this so we need to use path.resolve(). filename is the desired name of output file.

In module object we need to specify rules for transpiling our JavaScript through Babel.

Webpack can minify the output code with help of plugins. For JavaScript this can be done with uglifyjs-webpack-plugin. It comes with Webpack 3 automatically so you don’t need to install it.

Compile SCSS to CSS (Material Components Kit)

In Webpack the processing of CSS files can be done with help of specific loaders. SCSS additionally will require node-sass library so install it along with css-loader and sass-loader:

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

Also you will need to extract CSS from bundle into a separate file. This can be done with Webpack plugin extract-text-webpack-plugin so install it too:

npm install --save-dev extract-text-webpack-plugin
const path = require('path')
const webpack = require('webpack')
const ExtractTextPlugin = require('extract-text-webpack-plugin')

module.exports = [{
  name: 'css',
  entry: './src/styles/main.scss',
  output: {
    path: path.resolve(__dirname, 'dist/styles'),
    publicPath: '/dist/styles/',
    filename: 'app.css'
  },
  module: {
    rules: [{
      test: /\.s?css$/,
      use: ExtractTextPlugin.extract({
        use: [
          {
            loader: 'css-loader',
            options: {
              minimize: true,
              sourceMap: true
            }
          },
          {
            loader: 'sass-loader',
            options: {
              includePaths: ['node_modules'],
              sourceMap: true
            }
          }
        ]
      })
    }]
  },
  plugins: [
    new ExtractTextPlugin('app.css')
  ]
}]

Below is the final Webpack config file. It also includes the serving HTML template file with webpack-dev-server.

You can view the code on GitHub.

const path = require('path')
const webpack = require('webpack')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = [{
  name: 'js',
  entry: './src/scripts/index.js',
  output: {
    path: path.resolve(__dirname, 'dist/scripts'),
    publicPath: '/dist/scripts/',
    filename: 'app.js'
  },
  module: {
    rules: [{
      test: /\.js$/,
      loader: 'babel-loader',
      options: {
        cacheDirectory: true
      }
    }]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, 'index.html')
    }),
    new webpack.optimize.UglifyJsPlugin()
  ]
}, {
  name: 'css',
  entry: './src/styles/main.scss',
  output: {
    path: path.resolve(__dirname, 'dist/styles'),
    publicPath: '/dist/styles/',
    filename: 'app.css'
  },
  module: {
    rules: [{
      test: /\.s?css$/,
      use: ExtractTextPlugin.extract({
        use: [
          {
            loader: 'css-loader',
            options: {
              minimize: true,
              sourceMap: true
            }
          },
          {
            loader: 'sass-loader',
            options: {
              includePaths: ['node_modules'],
              sourceMap: true
            }
          }
        ]
      })
    }]
  },
  plugins: [
    new ExtractTextPlugin('app.css')
  ]
}]