Webpack + Customizable Foundation 6.x (Stylus)

Foundation CSS Framework comes in two versions SCSS and Stylus.

As example I will show here how to setup Stylus version.

Let’s say you already have style-loader, css-loader, postcss-loader, postcss, postcss-flexbugs-fixes and autoprefixer installed.

Install webpack plugins for stylus:

npm install stylus stylus-loader --save-dev

Install framework:

npm install foundation --save

Create directory src/foundation which will contain main css file src/foundation/foundation.styl and main js file src/foundation/foundation.js and other files which will override standard variables and mixins.

Create src/foundation/foundation.styl like below:

// Make sure the charset is set appropriately
@charset "UTF-8";

@import "~stylus-type-utils/index";

@import "~foundation/stylus/normalize";

// Site overrides
@import "variables";

// This includes all of the foundation global elements that are needed to work with any of the other files.
@import "~foundation/stylus/foundation/variables";

// Foundation Components
@import "~foundation/stylus/foundation/components/global";
@import "~foundation/stylus/foundation/components/grid";
@import "~foundation/stylus/foundation/components/visibility";
@import "~foundation/stylus/foundation/components/block-grid";
@import "~foundation/stylus/foundation/components/type";
@import "~foundation/stylus/foundation/components/buttons";
@import "~foundation/stylus/foundation/components/forms";
@import "~foundation/stylus/foundation/components/custom-forms";
@import "~foundation/stylus/foundation/components/button-groups";
@import "~foundation/stylus/foundation/components/dropdown-buttons";
@import "~foundation/stylus/foundation/components/split-buttons";
@import "~foundation/stylus/foundation/components/flex-video";
@import "~foundation/stylus/foundation/components/section";
@import "~foundation/stylus/foundation/components/top-bar";
@import "~foundation/stylus/foundation/components/orbit";
@import "~foundation/stylus/foundation/components/reveal";
@import "~foundation/stylus/foundation/components/joyride";
@import "~foundation/stylus/foundation/components/clearing";
@import "~foundation/stylus/foundation/components/alert-boxes";
@import "~foundation/stylus/foundation/components/breadcrumbs";
@import "~foundation/stylus/foundation/components/keystrokes";
@import "~foundation/stylus/foundation/components/labels";
@import "~foundation/stylus/foundation/components/inline-lists";
@import "~foundation/stylus/foundation/components/pagination";
@import "~foundation/stylus/foundation/components/panels";
@import "~foundation/stylus/foundation/components/pricing-tables";
@import "~foundation/stylus/foundation/components/progress-bars";
@import "~foundation/stylus/foundation/components/side-nav";
@import "~foundation/stylus/foundation/components/sub-nav";
@import "~foundation/stylus/foundation/components/switch";
@import "~foundation/stylus/foundation/components/magellan";
@import "~foundation/stylus/foundation/components/tables";
@import "~foundation/stylus/foundation/components/thumbs";
@import "~foundation/stylus/foundation/components/tooltips";
@import "~foundation/stylus/foundation/components/dropdown";

Create test override for button in src\foundation\variables.styl:

$primary-color = #710000;

You could use test html code below to check if overrides are working well:

          <button className="button">
            This button and all others should be red if Foundation overrides are working well
          </button>

Create src/foundation/foundation.js like below:

// keep vanilla order modules
import 'foundation/js/foundation/foundation';
import 'foundation/js/foundation/foundation.alerts';
import 'foundation/js/foundation/foundation.clearing';
import 'foundation/js/foundation/foundation.cookie';
import 'foundation/js/foundation/foundation.dropdown';
import 'foundation/js/foundation/foundation.forms';
import 'foundation/js/foundation/foundation.joyride';
import 'foundation/js/foundation/foundation.magellan';
import 'foundation/js/foundation/foundation.orbit';
import 'foundation/js/foundation/foundation.placeholder';
import 'foundation/js/foundation/foundation.reveal';
import 'foundation/js/foundation/foundation.section';
import 'foundation/js/foundation/foundation.tooltips';
import 'foundation/js/foundation/foundation.topbar';
import 'foundation/js/foundation/foundation.interchange';

Fix webpack configuration:

var path = require('path');

var webpack = require('webpack');

var ExtractTextPlugin = require('extract-text-webpack-plugin');

var isDevServer = ...

var stylusLoader = isDevServer
  ? ['style-loader?sourceMap', 'css-loader?sourceMap', 'postcss-loader?sourceMap', 'stylus-loader?sourceMap'].join('!')
  : ExtractTextPlugin.extract(['css-loader?sourceMap', 'postcss-loader?sourceMap', 'stylus-loader?sourceMap']);

// autoprefixer configuration for Foundation is unknown so we could define any we want
var autoprefixerBrowsers = ['last 2 versions', '> 1%'];

var config = {
  ...
  module: {
    ...
    loaders: [
      ...
      {
        test: /\.styl$/,
        loader: stylusLoader
      },
      ...
    ]
  },
  plugins: [
    ...
    new webpack.ProvidePlugin({
      jQuery: 'jquery',
    }),
    ...
    new webpack.optimize.CommonsChunkPlugin(...),
    new ExtractTextPlugin('[name].css?[hash]')
  ],
  postcss: function () {
    return [
      require('postcss-flexbugs-fixes'),
      require('autoprefixer')({ browsers: autoprefixerBrowsers })
    ];
  }
};

module.exports = config;

Now you could import js/css parts of Foundation from main file via:

import './foundation/foundation';
import './foundation/foundation.styl';