Document Setup for Self Hosted WebPack

Wanted to suggest that instructions on using WebPack as a deployment solution for muicss would be welcome in the Getting Started documentation. Here's a basic run-down of how to integrate the components as far as I can see it (I'm just experimenting with using muicss now).

Install your dependencies:

npm install babel-cli babel-preset-react babel-preset-latest babel-plugin-transform-class-properties react react-dom webpack  webpack-dev-server webpack-bundle-tracker  babel-loader eslint-loader eslint-plugin-react extract-text-webpack-plugin node-sass sass-loader style-loader css-loader muicss

Modify your webpack.base.config.js to use the plugins:

var path = require("path");
var webpack = require('webpack');
var BundleTracker = require('webpack-bundle-tracker');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

Add it to your plugins list:

plugins: [
    new webpack.optimize.OccurenceOrderPlugin(),
    new BundleTracker({
        filename: './bundles/webpack-stats.json'
    }),
    new ExtractTextPlugin("[name]-[hash].css"),
    new webpack.optimize.CommonsChunkPlugin({
        names: ['vendor']
    }),
]

Configure your module loaders:

  module: {
    loaders: [
        {
            test: /(\.js|\.jsx)$/,
            exclude: /(node_modules)/,
            loader: 'babel-loader',
            query: {
                presets: ['react','es2015'],
                plugins: ['transform-class-properties']
            }
        },
        {
            test: /\.[s]?css$/,
            loader: ExtractTextPlugin.extract(
                "style-loader", "css-loader?sourceMap!sass-loader?sourceMap"
            )
        }
    ]
  },

Add .css and .scss file to your set of webpack require-able modules:

  resolve: {
    modulesDirectories: [
        './internal-javascript',
        '../node_modules'
    ],
    extensions: ['', '.js', '.jsx','.css','.scss']
  },

Now create a .scss file on your import path (internal-javascript in the example) that you use to customise your colour scheme, for instance (internal-javascript/scss/company.scss):

@import "~muicss/lib/sass/mui-colors";

$mui-primary-color:       mui-color('light-blue', '500');
$mui-primary-color-dark:  mui-color('light-blue', '900');
$mui-primary-color-light: mui-color('light-blue', '100');
$mui-accent-color:        mui-color('light-blue', 'A200');
$mui-accent-color-dark:   mui-color('light-blue', 'A100');
$mui-accent-color-light:  mui-color('light-blue', 'A400');

@import "~muicss/lib/sass/mui";

and then import that .scss file from your bundle's root javascript file:

require( 'scss/company.scss' );

and then import your mui react components like so:

import Button from 'muicss/lib/react/button';
...
<Button>Hello World!</Button>

Anyway, it seems likely to me that having this kind of documentation may be helpful for those wanting to integrate muicss into their builds. Hope this helps.

muicss / mui

Document Setup for Self Hosted WebPack #172