diff --git a/packages/gatsby-plugin-less/src/gatsby-node.js b/packages/gatsby-plugin-less/src/gatsby-node.js
index 3f8400adf0be6..322ccebec5231 100644
--- a/packages/gatsby-plugin-less/src/gatsby-node.js
+++ b/packages/gatsby-plugin-less/src/gatsby-node.js
@@ -30,7 +30,7 @@ exports.onCreateWebpackConfig = (
   const lessRuleModules = {
     test: /\.module\.less$/,
     use: [
-      !isSSR && loaders.miniCssExtract(),
+      !isSSR && loaders.miniCssExtract({ hmr: false }),
       loaders.css({ ...cssLoaderOptions, modules: true, importLoaders: 2 }),
       loaders.postcss({ plugins: postCssPlugins }),
       lessLoader,
diff --git a/packages/gatsby-plugin-postcss/src/gatsby-node.js b/packages/gatsby-plugin-postcss/src/gatsby-node.js
index d8d8d8d1035b7..a58a975dd5a5d 100644
--- a/packages/gatsby-plugin-postcss/src/gatsby-node.js
+++ b/packages/gatsby-plugin-postcss/src/gatsby-node.js
@@ -61,7 +61,7 @@ exports.onCreateWebpackConfig = (
 
   if (!isSSR) {
     postcssRule.use.unshift(loaders.miniCssExtract())
-    postcssRuleModules.use.unshift(loaders.miniCssExtract())
+    postcssRuleModules.use.unshift(loaders.miniCssExtract({ hmr: false }))
   }
 
   const postcssRules = { oneOf: [] }
diff --git a/packages/gatsby-plugin-sass/src/gatsby-node.js b/packages/gatsby-plugin-sass/src/gatsby-node.js
index f3ef735ecd060..0d2122a8aca7d 100644
--- a/packages/gatsby-plugin-sass/src/gatsby-node.js
+++ b/packages/gatsby-plugin-sass/src/gatsby-node.js
@@ -30,7 +30,7 @@ exports.onCreateWebpackConfig = (
   const sassRuleModules = {
     test: /\.module\.s(a|c)ss$/,
     use: [
-      !isSSR && loaders.miniCssExtract(),
+      !isSSR && loaders.miniCssExtract({ hmr: false }),
       loaders.css({ ...cssLoaderOptions, modules: true, importLoaders: 2 }),
       loaders.postcss({ plugins: postCssPlugins }),
       sassLoader,
diff --git a/packages/gatsby-plugin-stylus/src/gatsby-node.js b/packages/gatsby-plugin-stylus/src/gatsby-node.js
index 614abfdb361f4..e0476957fe63b 100644
--- a/packages/gatsby-plugin-stylus/src/gatsby-node.js
+++ b/packages/gatsby-plugin-stylus/src/gatsby-node.js
@@ -53,7 +53,7 @@ exports.onCreateWebpackConfig = (
   const stylusRuleModules = {
     test: /\.module\.styl$/,
     use: [
-      !isSSR && loaders.miniCssExtract(),
+      !isSSR && loaders.miniCssExtract({ hmr: false }),
       loaders.css({ modules: true, importLoaders: 2 }),
       loaders.postcss({ plugins: postCssPlugins }),
       stylusLoader,
diff --git a/packages/gatsby/src/utils/webpack-utils.js b/packages/gatsby/src/utils/webpack-utils.js
index d8551274cf1b8..14758bd58c03c 100644
--- a/packages/gatsby/src/utils/webpack-utils.js
+++ b/packages/gatsby/src/utils/webpack-utils.js
@@ -389,7 +389,7 @@ module.exports = async ({
         loaders.css({ ...options, importLoaders: 1 }),
         loaders.postcss({ browsers }),
       ]
-      if (!isSSR) use.unshift(loaders.miniCssExtract())
+      if (!isSSR) use.unshift(loaders.miniCssExtract({ hmr: !options.modules }))
 
       return {
         use,