diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js
index 398b8bf53b7..5a14d75cbf5 100644
--- a/packages/react-scripts/config/webpack.config.dev.js
+++ b/packages/react-scripts/config/webpack.config.dev.js
@@ -269,7 +269,7 @@ module.exports = {
                 options: {
                   importLoaders: 1,
                   modules: true,
-                  localIdentName: '[path]__[name]___[local]',
+                  localIdentName: '[name]-[local]',
                 },
               },
               {
diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js
index 7b73dd787cd..2c3d73eaf21 100644
--- a/packages/react-scripts/config/webpack.config.prod.js
+++ b/packages/react-scripts/config/webpack.config.prod.js
@@ -306,7 +306,7 @@ module.exports = {
                         minimize: true,
                         sourceMap: shouldUseSourceMap,
                         modules: true,
-                        localIdentName: '[path]__[name]___[local]',
+                        localIdentName: '[hash:base64:5]',
                       },
                     },
                     {
diff --git a/packages/react-scripts/fixtures/kitchensink/integration/webpack.test.js b/packages/react-scripts/fixtures/kitchensink/integration/webpack.test.js
index bba497c49f3..90dbc46af89 100644
--- a/packages/react-scripts/fixtures/kitchensink/integration/webpack.test.js
+++ b/packages/react-scripts/fixtures/kitchensink/integration/webpack.test.js
@@ -26,9 +26,7 @@ describe('Integration', () => {
 
       expect(
         doc.getElementsByTagName('style')[0].textContent.replace(/\s/g, '')
-      ).to.match(
-        /.+__style-module___cssModulesInclusion+\{background:.+;color:.+}/
-      );
+      ).to.match(/\.style-module-cssModulesInclusion{background:.+;color:.+}/);
     });
 
     it('graphql files inclusion', async () => {