diff --git a/lib/builder/webpack/style-loader.js b/lib/builder/webpack/style-loader.js
index e528d423d7..4c3c689373 100755
--- a/lib/builder/webpack/style-loader.js
+++ b/lib/builder/webpack/style-loader.js
@@ -45,8 +45,8 @@ module.exports = function styleLoader(ext, loaders = [], isVueLoader = false) {
     }
   }
 
-  if (this.options.build.extractCSS && !this.options.dev) {
-    return ExtractTextPlugin.extract({
+  if (this.options.build.extractCSS) {
+    const extraction = ExtractTextPlugin.extract({
       fallback: vueStyleLoader,
       use: [
         cssLoader,
@@ -54,6 +54,7 @@ module.exports = function styleLoader(ext, loaders = [], isVueLoader = false) {
         ...loaders
       ].filter(l => l)
     })
+    return this.options.dev ? ['css-hot-loader'].concat(extraction) : extraction
   }
 
   // https://github.com/yenshih/style-resources-loader
diff --git a/package.json b/package.json
index 5a314e6742..e19b7c68b1 100644
--- a/package.json
+++ b/package.json
@@ -123,6 +123,7 @@
     "codecov": "^3.0.0",
     "copy-webpack-plugin": "^4.3.0",
     "cross-env": "^5.1.1",
+    "css-hot-loader": "^1.3.4",
     "eslint": "^4.13.1",
     "eslint-config-standard": "^11.0.0-beta.0",
     "eslint-config-standard-jsx": "^4.0.2",
diff --git a/test/basic.dev.test.js b/test/basic.dev.test.js
index 8bd9e552a5..681685b75d 100644
--- a/test/basic.dev.test.js
+++ b/test/basic.dev.test.js
@@ -20,7 +20,10 @@ test.serial('Init Nuxt.js', async t => {
     dev: true,
     build: {
       stats: false,
-      profile: true
+      profile: true,
+      extractCSS: {
+        allChunks: true
+      }
     },
     plugins: [
       '~/plugins/watch.js'
@@ -37,6 +40,14 @@ test.serial('Init Nuxt.js', async t => {
   t.true(spies.log.calledWithMatch('OPEN'))
 })
 
+test.serial('/extractCSS', async t => {
+  const window = await nuxt.renderAndGetWindow(url('/extractCSS'))
+  const html = window.document.head.innerHTML
+  t.true(html.includes('vendor.css'))
+  t.true(!html.includes('30px'))
+  t.is(window.getComputedStyle(window.document.body).getPropertyValue('font-size'), '30px')
+})
+
 test.serial('remove mixins in live reloading', async t => {
   const spies = await intercept({ log: true, error: true, stderr: true })
   await nuxt.renderRoute(url('/'))
diff --git a/test/fixtures/basic/pages/extractCSS.vue b/test/fixtures/basic/pages/extractCSS.vue
new file mode 100644
index 0000000000..ec788f2e74
--- /dev/null
+++ b/test/fixtures/basic/pages/extractCSS.vue
@@ -0,0 +1,9 @@
+<template>
+  <div></div>
+</template>
+
+<style>
+body {
+  font-size: 30px;
+}
+</style>
diff --git a/yarn.lock b/yarn.lock
index 85911dd40d..9213de6400 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1957,6 +1957,13 @@ css-color-names@0.0.4:
   version "0.0.4"
   resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0"
 
+css-hot-loader@^1.3.4:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/css-hot-loader/-/css-hot-loader-1.3.4.tgz#cd58b9419cd7ec82350b1d60713d86e480a8b286"
+  dependencies:
+    loader-utils "^1.1.0"
+    normalize-url "^1.9.1"
+
 css-loader@^0.28.7:
   version "0.28.7"
   resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-0.28.7.tgz#5f2ee989dd32edd907717f953317656160999c1b"
@@ -4646,7 +4653,7 @@ normalize-range@^0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/normalize-range/-/normalize-range-0.1.2.tgz#2d10c06bdfd312ea9777695a4d28439456b75942"
 
-normalize-url@^1.4.0:
+normalize-url@^1.4.0, normalize-url@^1.9.1:
   version "1.9.1"
   resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-1.9.1.tgz#2cc0d66b31ea23036458436e3620d85954c66c3c"
   dependencies: