Skip to content
A webpack loader for Materialize Css Library
Branch: develop
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
tests
.gitignore
LICENSE
README.md
index.js
index.loader.js
materialize-styles.loader.js
materialize.config.js
materialize.config.scss
package-lock.json
package.json

README.md

materialize-loader

npm (scoped with tag) npm Dependencies js-standard-style

Materialize configuration and loading package for webpack 2, using materialize-css (Sass).

Based on bootstrap-webpack by Scott Bleck (@bline) and font-awesome-webpack by Gowrav Shekar (@gowravshekar).

Usage

To properly load materialize-css, you need to configure loaders in your webpack.config.js. Example:

module.exports = {
  module: {
    loaders: [
      { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url-loader?limit=10000&mimetype=application/font-woff' },
      { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'file-loader' }
    ]
  }
};

Don't forget to install appropriated loaders

npm install --save-dev url-loader file-loader

Complete Materialize

To use the complete Materialize package including all styles with the default settings:

require("materialize-loader");

Custom configuration

You can configurate materialize-loader with two configuration files:

  • materialize.config.js
  • materialize.config.scss

Add both files next to each other in your project. Then:

require('materialize-loader!./path/to/materialize.config.js');

Or simple add it as entry point to your webpack.config.js:

module.exports = {
  entry: [
    'materialize-loader!./path/to/materialize.config.js',
    'your-existing-entry-point'
  ]
};

materialize.config.js

Example:

module.exports = {
  styles: {
    'materialize': true,
  }
};

materialize.config.scss

Imported after Materialize's default variables, but before anything else.

You may customize Materialize here.

Example:

$primary-color: color("blue-grey", "lighten-2");
$primary-color-light: lighten($primary-color, 15%);
$primary-color-dark: darken($primary-color, 15%);
You can’t perform that action at this time.