materialize-loader

A webpack loader for Materialize Css Library

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
materialize-loader
4503.0.14 years ago7 years agoMinified + gzip package size for materialize-loader in KB

Readme

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%);