webpack, postcss (import, map, nested, lost, autoprefix), hmr, middleware, express

constants.yml

breakpoints:
  mobile:
    max: "600px"
  tablet:
    min: "601px"
    max: "1000px"
  desktop:
    min: "1001px"

webpack.config.development.js

var path = require('path'),
    webpack = require('webpack'),
    packageJson = require('./package.json'),
    postcss = {
      'lost': require('lost'),
      'map': require('postcss-map'),
      'nested': require('postcss-nested'),
      'autoprefix': require('autoprefixer'),
      'import': require('postcss-import'),
      'url': require('postcss-url')
    };

module.exports = {

  devtool: 'eval',

  context: __dirname,

  entry: [
    __dirname + '/client/main.js',
    'webpack/hot/dev-server',
    'webpack-hot-middleware/client?http://localhost:' + packageJson.ports.dev
  ],

  output: {
    path: '/public',
    filename: 'bundle.js',
    publicPath: '/'
  },

  module: {
    loaders: [
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader!postcss-loader'
      },
      {
        test: /\.json$/,
        loader: 'json-loader',
        exclude: /node_modules/
      }
    ]
  },

  postcss: (_webpack) => {
    return [
      postcss.import({ addDependencyTo: _webpack, from: 'client/styles' }),
      postcss.map({ basePath: 'client/styles', maps: ['constants.yml'] }),
      postcss.nested,
      postcss.lost, 
      postcss.autoprefix
    ]
  },

  plugins: [
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  ],

  target: 'web'

};