added dynamic aliasing for custom scss folders

client/scss/all.scss

@@ -2,7 +2,7 @@
 @import '_reset';
 @import '_font';
 @import '_html';
-@import '_body';
+@import '~body/_body';
 @import '_react-app';
 @import '_text';
 

client_custom/scss/body/_body.scss

@@ -0,0 +1,11 @@
+body {
+  background-color: yellow;
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  word-wrap: break-word;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-flex-direction: column;
+  flex-direction: column;
+}

utils/createModuleAliases.js

@@ -2,6 +2,7 @@ const { statSync, existsSync, readdirSync } = require('fs');
 const { join, resolve } = require('path');
 const DEFAULT_ROOT = 'client/build';
 const CUSTOM_ROOT = 'client_custom/build';
+const CUSTOM_SCSS_ROOT = 'client_custom/scss';
 
 const getFolders = path => {
   if (existsSync(path)) {
@@ -10,14 +11,25 @@ const getFolders = path => {
   return [];
 };
 
-const addAlliasesForFolder = (name, aliasObject) => { // components
+const addAliasesForCustomComponentFolder = (name, aliasObject) => {
+  // creates an alias for each component in the folder that is passed to this function
   const folderPath = resolve(`${CUSTOM_ROOT}/${name}`);
   const components = getFolders(folderPath);
   for (let i = 0; i < components.length; i++) {
     let folderName = components[i];
     let aliasName = `@${name}/${folderName}`;
-    let aliasPath = resolve(`${CUSTOM_ROOT}/${name}/${folderName}/index.js`);
-    aliasObject[aliasName] = aliasPath;
+    aliasObject[aliasName] = resolve(`${CUSTOM_ROOT}/${name}/${folderName}/index.js`);
+  }
+  return aliasObject;
+};
+
+const addAlliasesForSCSS = (aliasObject) => { // scss
+  // creates an alias for every folder found in the custom scss folder
+  const customScssRoot = resolve(`${CUSTOM_SCSS_ROOT}`);
+  const customFolders = getFolders(customScssRoot);
+  for (let i = 0; i < customFolders.length; i++) {
+    let folderName = customFolders[i];
+    aliasObject[folderName] = resolve(`${CUSTOM_SCSS_ROOT}/${folderName}`);
   }
   return aliasObject;
 };
@@ -28,12 +40,12 @@ module.exports = () => {
   moduleAliases['@config'] = resolve(`config`);
   moduleAliases['@devConfig'] = resolve(`devConfig`);
 
-  // create specific aliases for locally defined components
-  moduleAliases = addAlliasesForFolder('containers', moduleAliases);
-  moduleAliases = addAlliasesForFolder('components', moduleAliases);
-  moduleAliases = addAlliasesForFolder('pages', moduleAliases);
+  // create specific aliases for locally defined components in the following folders
+  moduleAliases = addAliasesForCustomComponentFolder('containers', moduleAliases);
+  moduleAliases = addAliasesForCustomComponentFolder('components', moduleAliases);
+  moduleAliases = addAliasesForCustomComponentFolder('pages', moduleAliases);
 
-  // default aliases
+  // default component aliases
   moduleAliases['@containers'] = resolve(`${DEFAULT_ROOT}/containers`);
   moduleAliases['@components'] = resolve(`${DEFAULT_ROOT}/components`);
   moduleAliases['@pages'] = resolve(`${DEFAULT_ROOT}/pages`);
@@ -42,6 +54,9 @@ module.exports = () => {
   moduleAliases['@sagas'] = resolve(`${DEFAULT_ROOT}/sagas`);
   moduleAliases['@app'] = resolve(`${DEFAULT_ROOT}/app.js`);
 
+  // scss aliases
+  moduleAliases = addAlliasesForSCSS(moduleAliases);
+
   // return finished aliases
   return moduleAliases;
 };