diff --git a/client/scss/all.scss b/client/scss/all.scss index e2da3336..ad15d73d 100644 --- a/client/scss/all.scss +++ b/client/scss/all.scss @@ -2,7 +2,7 @@ @import '_reset'; @import '_font'; @import '_html'; -@import '_body'; +@import '~body/_body'; @import '_react-app'; @import '_text'; diff --git a/client/scss/_body.scss b/client/scss/body/_body.scss similarity index 100% rename from client/scss/_body.scss rename to client/scss/body/_body.scss diff --git a/client_custom/scss/body/_body.scss b/client_custom/scss/body/_body.scss new file mode 100644 index 00000000..be469857 --- /dev/null +++ b/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; +} diff --git a/utils/createModuleAliases.js b/utils/createModuleAliases.js index 7a494bf6..20eb89f2 100644 --- a/utils/createModuleAliases.js +++ b/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; };