MFE header override

Development
14

Alright! I got it to work!

module.config.js contents:

module.exports = {
  localModules: [
    // This line intercepts imports for the header's stylesheet and redirects them to the `src` directory of your local checkout of the header, which is where index.scss lives.
    { moduleName: '@edx/frontend-component-header/dist', dir: '../frontend-component-header', dist: 'src' },
    // This line catches JavaScript imports and points them at that same src directory.
    { moduleName: '@edx/frontend-component-header', dir: '../frontend-component-header', dist: 'src' },
  ],
};

I’ve noticed that JavaScript changes will be hot-reloaded, whereas SCSS changes may require a manual refresh. But this should get you working! Note that the dir attribute in each of those needs to point at your checkout of the header, wherever that is.

7 Likes