Vue Storefront theme inheritance

webpack.config.js

//...
const filterStream = require('postcss-filter-stream');
// Include the Alias Plugin
const AliasPlugin = require('enhanced-resolve/lib/AliasPlugin');
// ADD parent theme - replace with your parent theme's folder
const PARENT_THEME = 'parent'

module.exports = function (config, { isClient }) {
  const clientConfig = ... // default clientConfig
  
  /**
  * Theme inheritance with the resolve alias plugin
  */
  const themePath = path.resolve(__dirname)
  // path to  parent theme
  const parentThemePath = path.join(__dirname, '/../' + PARENT_THEME)
  // Let's set the parent theme as an actual alias, so we can use it later on to extend modules or import base css
  config.resolve.alias.baseTheme = parentThemePath
  config.resolve.plugins = config.resolve.plugins || []
  // Remove the default resolve entries for theme paths
  delete config.resolve.alias.theme
  delete config.resolve.alias['theme/app']
  delete config.resolve.alias['theme/css']
  delete config.resolve.alias['theme/resource']

  // Use the enhanced-resolve Alias plugin to create a resolve-tree
  config.resolve.plugins.push(new AliasPlugin('described-resolve', [
    { name: 'theme',
      alias: [
        themePath,
        parentThemePath
      ] },
    { name: 'theme/app',
      alias: [
        path.join(themePath, 'App.vue'),
        path.join(parentThemePath, 'App.vue')
      ] },
    { name: 'theme/css',
      alias: [
        path.join(themePath, 'css'),
        path.join(parentThemePath, 'css')
      ] },
    { name: 'theme/resource',
      alias: [
        path.join(themePath, 'resource'),
        path.join(parentThemePath, 'resource')
      ] }
  ], 'resolve'))
  const mergedConfig = merge(
    // alias for 'src/modules/client' has to be the first one, because it has to be
    // handled earlier than already existing aliases in VSF (like general 'src' path)
    { resolve: { alias: { 'src/modules/client': `${themeRoot}/config/modules` } } },
    config, // default vsf config
    clientConfig,
    additionalConfig // add the theme inheritance config
  );

  fixPostCSSPlugins(mergedConfig.module.rules);

  return mergedConfig;
};