Extracting Stylesheets with Gatsby

gatsby.config.js

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

module.exports = function(config, env) {
  if(env === 'static') {
    config.removeLoader('css');
    config.loader('css', function(cfg) {
      cfg.test = /\.css$/;
      cfg.loader = ExtractTextPlugin.extract('css?minimize');
      return cfg
    })
    config.plugin('extract-css',
                  ExtractTextPlugin,
                  ["styles.css", { allChunks: true }]);
  }
  return config;
}

html.jsx

import './what.css';
...
<link rel="stylesheet" type="text/css" href='/styles.css'/>

instructions.md

1. Install dependencies

npm install --save webpack extract-text-webpack-plugin

2. Make the changes specified in the files here

what.css

body {
    background: pink;
}