Skip to content

Dont depend on root config for bundled css mounting #1

@ankarhem

Description

@ankarhem

Hey! Thanks for this example. An improvement I found was setting the base property in the vite config to dynamically mount / unmount the css link.

const baseUrl = import.meta.env.BASE_URL;

const mountCss = () => {
  try {
    const css = document.createElement('link');
    css.id = 'single-spa-application:@norce/layout:css';
    css.rel = 'stylesheet';
    css.href = `${baseUrl}bundle.css`;
    document.head.appendChild(css);
  } catch (e) {
    console.error(e);
  }
};
const unmountCss = () => {
  try {
    const css = document.getElementById(
      'single-spa-application:@norce/layout:css'
    );
    if (css) {
      document.head.removeChild(css);
    }
  } catch (e) {
    console.error(e);
  }
};

export const bootstrap = svelteLifecycles.bootstrap;
export const mount = (...props) => {
  mountCss();
  return svelteLifecycles.mount(...props);
};
export const unmount = (...props) => {
  unmountCss();
  return svelteLifecycles.unmount(...props);
};

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions