diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js
index 44669e6059f..823741f61d1 100644
--- a/packages/react-scripts/config/webpack.config.dev.js
+++ b/packages/react-scripts/config/webpack.config.dev.js
@@ -19,6 +19,7 @@ const eslintFormatter = require('react-dev-utils/eslintFormatter');
 const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
 const getClientEnvironment = require('./env');
 const paths = require('./paths');
+const CSSVisor = require('css-visor');
 
 // Webpack uses `publicPath` to determine where the app is being served from.
 // In development, we always serve from the root. This makes config easier.
@@ -180,17 +181,18 @@ module.exports = {
           },
           // "postcss" loader applies autoprefixer to our CSS.
           // "css" loader resolves paths in CSS and adds assets as dependencies.
-          // "style" loader turns CSS into JS modules that inject <style> tags.
+          // "css-visor" loader extracts css from css-loader and appends HMR code to JS module
           // In production, we use a plugin to extract that CSS to a file, but
-          // in development "style" loader enables hot editing of CSS.
+          // in development "css-visor" loader + plugin enables hot editing of CSS.
           {
             test: /\.css$/,
             use: [
-              require.resolve('style-loader'),
+              require.resolve('css-visor/loader'),
               {
                 loader: require.resolve('css-loader'),
                 options: {
                   importLoaders: 1,
+                  sourceMap: true
                 },
               },
               {
@@ -238,6 +240,8 @@ module.exports = {
     ],
   },
   plugins: [
+    // CSS extracted by css-visor/loader is passed on to this plugin, which ensures they get served by webpack-dev-server
+    new CSSVisor(),
     // Makes some environment variables available in index.html.
     // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
     // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json
index 123f966d035..425e44954d9 100644
--- a/packages/react-scripts/package.json
+++ b/packages/react-scripts/package.json
@@ -31,6 +31,7 @@
     "case-sensitive-paths-webpack-plugin": "2.1.1",
     "chalk": "1.1.3",
     "css-loader": "0.28.4",
+    "css-visor": "^0.1.0",
     "dotenv": "4.0.0",
     "eslint": "4.4.1",
     "eslint-config-react-app": "^2.0.1",