Skip to content

Instantly share code, notes, and snippets.

@adrianjost
Last active January 31, 2020 11:17
Show Gist options
  • Save adrianjost/79ac02b6df434c97511ca80f43e61837 to your computer and use it in GitHub Desktop.
Save adrianjost/79ac02b6df434c97511ca80f43e61837 to your computer and use it in GitHub Desktop.
NuxtJS Theming - Component aliases with theming - https://medium.com/p/2567ef5b5b6a
const glob = require("glob");
const path = require("path");
// returns a list of all filepaths in a given directory
const readDirRecursiveSync = dir => {
return glob.sync(`${dir}/**/*.*`);
};
const getThemeAliases = (dir, theme) => {
const themeFilesDir = `src/themes/${theme}/${dir}`;
return (
readDirRecursiveSync(themeFilesDir)
// make paths relative
.map(componentPath => componentPath.replace(themeFilesDir, "").substr(1))
// create alias for path
.reduce((aliases, componentPath) => {
aliases[`@${dir}/${componentPath}`] =
themeFilesDir + "/" + componentPath;
return aliases;
}, {})
);
};
const aliases = {
// generate theme aliases for the src/components directory
...getThemeAliases("components", process.env.THEME),
// required to not break nuxt
"@": "src",
"@@": ".",
// custom aliases
"@components": "src/components"
};
for (const alias in aliases) {
module.exports[alias] = path.resolve(__dirname, aliases[alias]);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment