Hot reload styles

geowarin · Apr 30, 2016 · cbb6a32 · cbb6a32
1 parent fdde912
commit cbb6a32
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 6 deletions.
diff --git a/lib/loaders/dev/css.js b/lib/loaders/dev/css.js
@@ -0,0 +1,6 @@
+module.exports = [
+  {
+    test: /\.css/,
+    loaders: ['style', 'css?sourceMap']
+  }
+];
diff --git a/lib/loaders/css.js → lib/loaders/prod/css.js b/lib/loaders/css.js → lib/loaders/prod/css.js
@@ -3,6 +3,6 @@ const ExtractTextPlugin = require('extract-text-webpack-plugin');
 module.exports = [
   {
     test: /\.css/,
-    loader: ExtractTextPlugin.extract('css-loader')
+    loader: ExtractTextPlugin.extract('style', 'css?sourceMap')
   }
 ];
diff --git a/lib/webpack/webpack.dev.config.js b/lib/webpack/webpack.dev.config.js
@@ -4,7 +4,7 @@ const requireDir = require('require-dir');
 const path = require('path');
 const webpack = require('webpack');
 
-const allLoaders = requireDir('../loaders');
+const allLoaders = Object.assign(requireDir('../loaders'), requireDir('../loaders/dev'));
 const loaders = Object.keys(allLoaders).reduce((p, k) => p.concat(allLoaders[k]), []);
 
 const env = 'development';
@@ -35,8 +35,7 @@ module.exports = function devConfig (options) {
       new HtmlWebpackPlugin({
         title: 'ReactApp',
         template: path.join(options.projectDir, 'index.html')
-      }),
-      new ExtractTextPlugin('style.css')
+      })
     ],
     resolve: {
       modules: [path.join(options.projectDir, 'src'), 'node_modules'],

diff --git a/lib/webpack/webpack.prod.config.js b/lib/webpack/webpack.prod.config.js
@@ -4,7 +4,7 @@ const requireDir = require('require-dir');
 const path = require('path');
 const webpack = require('webpack');
 
-const allLoaders = requireDir('../loaders');
+const allLoaders = Object.assign(requireDir('../loaders'), requireDir('../loaders/prod'));
 const loaders = Object.keys(allLoaders).reduce((p, k) => p.concat(allLoaders[k]), []);
 
 const env = 'production';
@@ -51,7 +51,7 @@ module.exports = function config (options) {
           screw_ie8: true
         }
       }),
-      new ExtractTextPlugin('style.css')
+      new ExtractTextPlugin('style-[hash].css')
     ],
     resolve: {
       modules: [path.join(options.projectDir, 'src'), 'node_modules'],

diff --git a/package.json b/package.json
@@ -33,6 +33,7 @@
     "redbox-noreact": "^1.0.0",
     "require-dir": "^0.3.0",
     "resolve": "^1.1.7",
+    "style-loader": "^0.13.1",
     "url-loader": "^0.5.7",
     "webpack": "^2.1.0-beta.6",
     "webpack-dev-middleware": "^1.6.1",