diff --git a/packages/react-scripts/config/webpack.config.js b/packages/react-scripts/config/webpack.config.js
index e67f04c1e09..f725cb20ee5 100644
--- a/packages/react-scripts/config/webpack.config.js
+++ b/packages/react-scripts/config/webpack.config.js
@@ -79,14 +79,14 @@ module.exports = function(webpackEnv) {
   // common function to get style loaders
   const getStyleLoaders = (cssOptions, preProcessor) => {
     const loaders = [
-      isEnvDevelopment && require.resolve('style-loader'),
-      isEnvProduction && {
+      {
         loader: MiniCssExtractPlugin.loader,
-        // css is located in `static/css`, use '../../' to locate index.html folder
-        // in production `paths.publicUrlOrPath` can be a relative path
-        options: paths.publicUrlOrPath.startsWith('.')
-          ? { publicPath: '../../' }
-          : {},
+        options: {
+          hmr: isEnvDevelopment,
+          // css is located in `static/css`, use '../../' to locate index.html folder
+          // in production `paths.publicUrlOrPath` can be a relative path
+          publicPath: paths.publicUrlOrPath.startsWith('.') ? '../../' : undefined,
+        },
       },
       {
         loader: require.resolve('css-loader'),
@@ -485,10 +485,7 @@ module.exports = function(webpackEnv) {
             },
             // "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.
-            // In production, we use MiniCSSExtractPlugin to extract that CSS
-            // to a file, but in development "style" loader enables hot editing
-            // of CSS.
+            // We use MiniCSSExtractPlugin to extract CSS to a file.
             // By default we support CSS Modules with the extension .module.css
             {
               test: cssRegex,
@@ -631,13 +628,16 @@ module.exports = function(webpackEnv) {
       // See https://github.com/facebook/create-react-app/issues/186
       isEnvDevelopment &&
         new WatchMissingNodeModulesPlugin(paths.appNodeModules),
-      isEnvProduction &&
-        new MiniCssExtractPlugin({
-          // Options similar to the same options in webpackOptions.output
-          // both options are optional
-          filename: 'static/css/[name].[contenthash:8].css',
-          chunkFilename: 'static/css/[name].[contenthash:8].chunk.css',
-        }),
+      new MiniCssExtractPlugin({
+        // Options similar to the same options in webpackOptions.output
+        // both options are optional
+        filename: isEnvProduction
+          ? 'static/css/[name].[contenthash:8].css'
+          : isEnvDevelopment && 'static/css/[name].css',
+        chunkFilename: isEnvProduction
+          ? 'static/css/[name].[contenthash:8].chunk.css'
+          : isEnvDevelopment && 'static/css/[name].chunk.css',
+      }),
       // Generate an asset manifest file with the following content:
       // - "files" key: Mapping of all asset filenames to their corresponding
       //   output file so that tools can pick it up without having to parse
diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json
index 06da6cffc59..76fe888a53a 100644
--- a/packages/react-scripts/package.json
+++ b/packages/react-scripts/package.json
@@ -72,7 +72,6 @@
     "resolve-url-loader": "3.1.1",
     "sass-loader": "8.0.2",
     "semver": "6.3.0",
-    "style-loader": "1.1.3",
     "terser-webpack-plugin": "2.3.4",
     "ts-pnp": "1.1.5",
     "url-loader": "2.3.0",