fix exposed_variables issue with AoT build

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);

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
 };

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: [{
+        use: cssLoaders
-          loader: 'to-string-loader',
-          options: {
-            sourceMap: true
-          }
-        },
-          {
-            loader: 'css-loader',
-            options: {
-              sourceMap: true,
-              modules: true
-            }
-          },
-          {
-            loader: 'postcss-loader',
-            options: {
-              sourceMap: true
-            }
-          }
-        ]
       },
       {
         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: [
-          {
+          ...scssLoaders,
-            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
-          },
           {
             loader: 'sass-resources-loader',
             options: {
@@ -98,24 +60,9 @@ module.exports = {
         ]
       },
       {
-        test: /_exposed_variables.scss$/,
+        test: /^(_exposed)?_variables.scss$/,
         exclude: /node_modules/,
-        use: [{
+        use: scssLoaders
-          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
-            },
-          }
-        ]
       },
       {
         test: /\.html$/,