fix dev build

src/styles/_bootstrap_variables.scss

@@ -1,3 +1,5 @@
+@import '_themed_bootstrap_variables.scss';
+
 /** Help Variables **/
 $fa-fixed-width: 1.25rem;
 $icon-padding: 1rem;

src/styles/_custom_variables.scss

@@ -1,3 +1,5 @@
+@import '_themed_custom_variables.scss';
+
 $content-spacing: $spacer * 1.5;
 
 $button-height: $input-btn-padding-y * 2 + $input-btn-line-height + calculateRem($input-btn-border-width*2);

src/styles/_variables.scss

@@ -1,13 +1,7 @@
 @import '_functions.scss';
 @import '../../node_modules/bootstrap/scss/functions.scss';
 
-//@import '$themePath$/bootstrap_variables.scss';
-@import '../../themes/mantis/styles/bootstrap_variables.scss';
-
-@import 'bootstrap_variables.scss';
+@import '_bootstrap_variables.scss';
 @import '../../node_modules/bootstrap/scss/variables.scss';
 
-//@import '$themePath$/custom_variables.scss';
-@import '../../themes/mantis/styles/custom_variables.scss';
-
-@import 'custom_variables.scss';
+@import '_custom_variables.scss';

themes/mantis/styles/_themed_custom_variables.scss

@@ -1,2 +1,2 @@
 $banner-text-background: rgba(0, 0, 0, 0.35);
-$banner-background-gradient-width: 300px;
+$banner-background-gradient-width: 300px;

webpack/helpers.js

@@ -20,18 +20,13 @@ const theme = 'mantis';
 const themePath = path.normalize(path.join(__dirname, '..', 'themes', theme));
 
 const globalCSSImports = [
-  path.resolve(__dirname, '..', 'src/styles/_variables.scss'),
-  path.resolve(__dirname, '..', 'src/styles/_mixins.scss'),
+  buildRoot('styles/_variables.scss'),
+  buildRoot('styles/_mixins.scss'),
 ];
 
 const themeReplaceOptions =
   {
     multiple: [
-      {
-        search: '$themePath$/',
-        replace: (themePath.length ? themePath + '/' : ''),
-        flags: 'g'
-      },
       {
         search: '@import \'~/',
         replace: '@import \'' + projectRoot('./') + '/',
@@ -62,7 +57,6 @@ const themedUse = (resource, extension) => {
   const themedPath = getThemedPath(resource, extension);
 
   return [
-    //'debug-loader',
     {
       loader: 'string-replace-loader',
       options: {
@@ -74,50 +68,14 @@ 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,
   theme,
+  themePath,
   getThemedPath,
   themedTest,
   themedUse,
-  cssLoaders,
-  scssLoaders,
   globalCSSImports,
   themeReplaceOptions
 };

webpack/webpack.common.js

@@ -2,9 +2,10 @@ const CopyWebpackPlugin = require('copy-webpack-plugin');
 const path = require('path');
 const {
   projectRoot,
+  buildRoot,
   globalCSSImports,
-  cssLoaders,
-  scssLoaders,
+  themeReplaceOptions,
+  themePath,
   themedTest,
   themedUse
 } = require('./helpers');
@@ -41,28 +42,109 @@ module.exports = {
       },
       {
         test: /\.css$/,
-        use: cssLoaders
+        use: [
+          {
+            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/_variables.scss')
+        exclude: [
+          /node_modules/,
+          buildRoot('styles/_exposed_variables.scss'),
+          buildRoot('styles/_variables.scss')
         ],
         use: [
-          ...scssLoaders,
+          {
+            loader: 'raw-loader',
+            options: {
+              sourceMap: true
+            }
+          },
+          {
+            loader: 'postcss-loader',
+            options: {
+              sourceMap: true
+            }
+          },
+          {
+            loader: 'resolve-url-loader',
+            options: {
+              sourceMap: true
+            }
+          },
+          {
+            loader: 'sass-loader',
+            options: {
+              sourceMap: true,
+              includePaths: [path.join(themePath, 'styles')]
+            }
+          },
+          'debug-loader',
           {
             loader: 'sass-resources-loader',
             options: {
               resources: globalCSSImports
             },
+          },
+          {
+            loader: 'string-replace-loader',
+            options: themeReplaceOptions
           }
         ]
       },
       {
-        test: /^(_exposed)?_variables.scss$/,
-        exclude: /node_modules/,
-        use: scssLoaders
+        test: /(_exposed)?_variables.scss$/,
+        exclude: [/node_modules/],
+        use: [
+          {
+            loader: 'css-loader',
+            options: {
+              sourceMap: true,
+              modules: true
+            }
+          },
+          {
+            loader: 'postcss-loader',
+            options: {
+              sourceMap: true
+            }
+          },
+          {
+            loader: 'resolve-url-loader',
+            options: {
+              sourceMap: true
+            }
+          },
+          {
+            loader: 'sass-loader',
+            options: {
+              sourceMap: true,
+              includePaths: [path.join(themePath, 'styles')]
+            }
+          },
+          {
+            loader: 'string-replace-loader',
+            options: themeReplaceOptions
+          }
+        ]
       },
       {
         test: /\.html$/,