From 50effd3b70b820099b8be37c0b29090cc854b318 Mon Sep 17 00:00:00 2001
From: Art Lowel <art.lowel@atmire.com>
Date: Fri, 31 May 2019 13:24:04 +0200
Subject: [PATCH] fix exposed_variables issue with AoT build

---
 src/styles/_exposed_variables.scss |  2 +
 webpack/helpers.js                 | 37 ++++++++++++++++
 webpack/webpack.common.js          | 69 ++++--------------------------
 3 files changed, 47 insertions(+), 61 deletions(-)

diff --git a/src/styles/_exposed_variables.scss b/src/styles/_exposed_variables.scss
index f66c25bbaf..1ab67e709d 100644
--- a/src/styles/_exposed_variables.scss
+++ b/src/styles/_exposed_variables.scss
@@ -1,3 +1,5 @@
+@import '_variables.scss';
+
 :export {
     xlMin: map-get($grid-breakpoints, xl);
     mdMin: map-get($grid-breakpoints, md);
diff --git a/webpack/helpers.js b/webpack/helpers.js
index db11a7ed9e..06c13fa666 100644
--- a/webpack/helpers.js
+++ b/webpack/helpers.js
@@ -74,6 +74,41 @@ const themedUse = (resource, extension) => {
   ]
 };
 
+const cssLoaders = [
+  {
+    loader: 'raw-loader',
+    options: {
+      sourceMap: true
+    }
+  },
+  {
+    loader: 'postcss-loader',
+    options: {
+      sourceMap: true
+    }
+  },
+  {
+    loader: 'resolve-url-loader',
+    options: {
+      sourceMap: true
+    }
+  },
+];
+
+const scssLoaders = [
+  ...cssLoaders,
+  {
+    loader: 'sass-loader',
+    options: {
+      sourceMap: true
+    }
+  },
+  {
+    loader: 'string-replace-loader',
+    options: themeReplaceOptions
+  }
+];
+
 module.exports = {
   projectRoot,
   buildRoot,
@@ -81,6 +116,8 @@ module.exports = {
   getThemedPath,
   themedTest,
   themedUse,
+  cssLoaders,
+  scssLoaders,
   globalCSSImports,
   themeReplaceOptions
 };
diff --git a/webpack/webpack.common.js b/webpack/webpack.common.js
index fc6841a0c4..6e99645419 100644
--- a/webpack/webpack.common.js
+++ b/webpack/webpack.common.js
@@ -3,7 +3,8 @@ const path = require('path');
 const {
   projectRoot,
   globalCSSImports,
-  themeReplaceOptions,
+  cssLoaders,
+  scssLoaders,
   themedTest,
   themedUse
 } = require('./helpers');
@@ -40,55 +41,16 @@ module.exports = {
       },
       {
         test: /\.css$/,
-        use: [{
-          loader: 'to-string-loader',
-          options: {
-            sourceMap: true
-          }
-        },
-          {
-            loader: 'css-loader',
-            options: {
-              sourceMap: true,
-              modules: true
-            }
-          },
-          {
-            loader: 'postcss-loader',
-            options: {
-              sourceMap: true
-            }
-          }
-        ]
+        use: cssLoaders
       },
       {
         test: /\.scss$/,
         exclude: [/node_modules/,
-          path.resolve(__dirname, '..', 'src/styles/_exposed_variables.scss')
+          path.resolve(__dirname, '..', 'src/styles/_exposed_variables.scss'),
+          path.resolve(__dirname, '..', 'src/styles/_variables.scss')
         ],
         use: [
-          {
-            loader: 'raw-loader',
-            options: {
-              sourceMap: true
-            }
-          },
-          {
-            loader: 'resolve-url-loader',
-            options: {
-              sourceMap: true
-            }
-          },
-          {
-            loader: 'sass-loader',
-            options: {
-              sourceMap: true
-            }
-          },
-          {
-            loader: 'string-replace-loader',
-            options: themeReplaceOptions
-          },
+          ...scssLoaders,
           {
             loader: 'sass-resources-loader',
             options: {
@@ -98,24 +60,9 @@ module.exports = {
         ]
       },
       {
-        test: /_exposed_variables.scss$/,
+        test: /^(_exposed)?_variables.scss$/,
         exclude: /node_modules/,
-        use: [{
-          loader: "css-loader" // translates CSS into CommonJS
-        }, {
-          loader: "sass-loader" // compiles Sass to CSS
-        },
-          {
-            loader: 'string-replace-loader',
-            options: themeReplaceOptions
-          },
-          {
-            loader: 'sass-resources-loader',
-            options: {
-              resources: globalCSSImports
-            },
-          }
-        ]
+        use: scssLoaders
       },
       {
         test: /\.html$/,