How to implement Material Design components using Webpack

Material Design, developed by Google in 2014, uses strict guidelines to style its web components. In such a scenario using a third-party library comes in handy. When searching for libraries you will end up finding tons of them, but there is only one Material Design library that is Google maintained. We can use Webpack to easily implement the design into our website.

Webpack was made primarily for Javascript bundling but it’s been a long time since developers also use it to transform other frontend assets like HTML, CSS, SCSS, images… Here’s how to use Webpack to implement Material Design SASS components:

Install Webpack

You can install Webpack into a local package using npm:

npm install --save-dev webpack

Or you can also install Webpack globally:

npm install --global webpack

Install the required dependencies using NPM

For this project to work we have to install the required packages. Open the command line terminal and execute the following command:

npm install --save-dev webpack-cli sass sass-loader file-loader extract-loader css-loader

When NPM ends installing the dependencies, the following lines will be automatically added to the devDependencies object of your package.json file:

"devDependencies": {
    "css-loader": "^6.7.1",
    "extract-loader": "^5.1.0",
    "file-loader": "^6.2.0",
    "sass": "^1.53.0",
    "sass-loader": "^13.0.2",
    "webpack": "^5.73.0",
    "webpack-cli": "^4.10.0"
  }

Create the project structure

The project directory structure has to be created in order to know where to output the transformed files. Our directory structure will look like this:

-public
 --index.html
-scss
 --app.scss
-webpack.config.js
-package.json

Create a Webpack config file

The recent version of Webpack doesn’t require the config file but every project must have one to avoid manually typing a lot of commands in the terminal, so let’s create one:

var path = require("path");

module.exports = [{
  mode: "production",
  entry: './scss/app.scss',
  output: {
    // This is necessary for webpack to compile
    // But we never use style-bundle.js
    filename: 'style-bundle.js',
    path: path.join(__dirname, "public"),
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'bundle.css',
            },
          },
          {
            loader: "extract-loader",
            options: {
              publicPath: path.join(__dirname, "public"),
            }
          },
          {
            loader: 'css-loader',
            options: {
              url: false
            }
          },
          {
            loader: 'sass-loader',
            options: {
              // Prefer Dart Sass
              implementation: require('sass'),

              // See https://github.com/webpack-contrib/sass-loader/issues/804
              webpackImporter: false,
              sassOptions: {
                includePaths: ['./node_modules']
              },
            }
          }
        ]
      }
    ]
  },
}];

Implement a Material Design component

The beauty in creating the Material Design website using NPM and Webpack is that you have the ability to import only the needed components. For example, for this tutorial, we are going to import the Material Design Button component.

npm install @material/button

Now that we have the component imported we can add it to the page:

<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>My Tutorial</title>
    <link rel="stylesheet" href="bundle.css">
</head>

<body>
    <div class="container">
        <button class="mdc-button mdc-button--raised my-button">
            <span class="mdc-button__label">My Coolest Button</span>
        </button>
    </div>
</body>

</html>

And we can import the component styles into the app.scss file as well:

@use "@material/button/styles";
@use "@material/button";

body{
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    height: 100vh;
    flex-direction: column;
    background-color: #fce4ec;
}
.container{
    text-align: center;
}
.my-button {
    @include button.ink-color(#ff9e80);
}

Run the bundler

Now that we have the app.scss file filled in, we can run the Webpack to bundle it into the bundle.css file. The first thing you need to do is to open the package.json file and assign “webpack” to the build script:

{
  "scripts": {
    "build": "webpack"
  },
  "devDependencies": {
    "css-loader": "^6.7.1",
    "extract-loader": "^5.1.0",
    "file-loader": "^6.2.0",
    "sass": "^1.53.0",
    "sass-loader": "^13.0.2",
    "webpack": "^5.73.0",
    "webpack-cli": "^4.10.0"
  },
  "dependencies": {
    "@material/button": "^14.0.0"
  }
}

Now you can run the build by executing the following command:

npm run build

Congrats, your web page with the Material Design button is ready and looks cool.

Was this helpful?

2 / 0

#Material Design #NPM #sass #Webkit