rickvanlieshout.com/gatsby.config.js

import webpack from 'webpack'
import precss from 'precss'
import lost from 'lost'
import rucksack from 'rucksack-css'
import ExtractTextPlugin from 'extract-text-webpack-plugin'

module.exports = function(config, env) {
    var is_static = env === 'static';
    var is_develop = env === 'develop';
    var is_production = env === 'production';

    config.merge({
        postcss: [
            lost(),
            rucksack({
                autoprefixer: true
            })
        ]
    });

    config.removeLoader('css');

    if (is_develop) {
        config.loader('css', function(cfg) {
            cfg.test = /\.css/;
            cfg.loaders = ['style', 'css-loader', 'postcss-loader'];
            return cfg
        })
        config.loader('postcss', function(cfg) {
            cfg.test = /\.sss/;
            cfg.loaders = ['style', 'css-loader', 'postcss-loader?parser=sugarss'];
            return cfg
        })
    } else {
        config.loader('css', function(cfg) {
            cfg.test = /\.css/;
            cfg.loader = ExtractTextPlugin.extract(['css-loader', 'postcss-loader']);
            return cfg
        })
        config.loader('postcss', function(cfg) {
            cfg.test = /\.sss/;
            cfg.loader = ExtractTextPlugin.extract(['css-loader', 'postcss-loader?parser=sugarss']);
            return cfg
        })
    }

    config.plugin('extract-css',
        ExtractTextPlugin,
        ["styles.css", {
            allChunks: true
        }]);

    return config
};