diff --git a/src/common/styles/_layout.scss b/src/common/styles/_layout.scss
index 005699237..a16b24f46 100644
--- a/src/common/styles/_layout.scss
+++ b/src/common/styles/_layout.scss
@@ -15,19 +15,3 @@ $lg-height-min: 48.875rem;
 $whenPageIsMediumHeightAndWidth: '(min-height: #{$md-height-min}) and (min-width: #{$md-layout-width-min})';
 $whenPageIsTallAndMediumWidth: '(min-width: #{$md-layout-width-min}) and (min-height: #{$lg-height-min})';
 $whenPageIsIsTallAndWide: '(min-width: #{$lg-layout-width-min}) and (min-height: #{$lg-height-min})';
-
-
-/* webpack export statement exposes these variables to our JS files */
-:export {
-  extraLargeWidthMin: $xl-layout-width-min;
-  largeHeightMin: $lg-height-min;
-  largeWidthMin: $lg-layout-width-min;
-  mediumHeightMax: $md-height-max;
-  mediumHeightMin: $md-height-min;
-  mediumWidthMin: $md-layout-width-min;
-  mediumWidthMax: $md-layout-width-max;
-  pageIsAtMediumHeightAndWidth: $whenPageIsMediumHeightAndWidth;
-  pageIsTallAndMediumWidth: $whenPageIsTallAndMediumWidth;
-  pageIsTallAndWide: $whenPageIsIsTallAndWide;
-  smallHeightMax: $sm-height-max;
-}
\ No newline at end of file
diff --git a/src/common/styles/layout.module.scss b/src/common/styles/layout.module.scss
new file mode 100644
index 000000000..02e631e35
--- /dev/null
+++ b/src/common/styles/layout.module.scss
@@ -0,0 +1,17 @@
+@import './_layout.scss';
+
+/* webpack export statement exposes these variables to our JS files */
+/* we have to do this in a separate *.module.scss file because of this bug https://github.com/facebook/create-react-app/issues/10047 */
+:export {
+  extraLargeWidthMin: $xl-layout-width-min;
+  largeHeightMin: $lg-height-min;
+  largeWidthMin: $lg-layout-width-min;
+  mediumHeightMax: $md-height-max;
+  mediumHeightMin: $md-height-min;
+  mediumWidthMin: $md-layout-width-min;
+  mediumWidthMax: $md-layout-width-max;
+  pageIsAtMediumHeightAndWidth: $whenPageIsMediumHeightAndWidth;
+  pageIsTallAndMediumWidth: $whenPageIsTallAndMediumWidth;
+  pageIsTallAndWide: $whenPageIsIsTallAndWide;
+  smallHeightMax: $sm-height-max;
+}
\ No newline at end of file
diff --git a/src/constants/index.js b/src/constants/index.js
index 9edfe20e2..034583be9 100644
--- a/src/constants/index.js
+++ b/src/constants/index.js
@@ -3,7 +3,7 @@ import { toast } from 'react-toastify';
 import { buildbranch, buildnum } from '../../package.json';
 import { INITIAL_FILTER_STATE } from '../ducks/event-filter';
 
-import layoutVariables from '../common/styles/_layout.scss';
+import layoutVariables from '../common/styles/layout.module.scss';
 
 const { POSITION: TOAST_POSITIONS } = toast;