Did you tried single-spa-css to load app specific css ?

[billyjov]

I got this error trying to load one app specific css using single-spa-css (https://github.com/single-spa/single-spa-css)

Here are my configs:

import Application from '@ember/application';
import Resolver from 'ember-resolver';
import loadInitializers from 'ember-load-initializers';
import config from 'login/config/environment';
// single spa imports
import singleSpaCss from 'single-spa-css';
import singleSpaEmber from 'single-spa-ember';

export default class App extends Application {
  modulePrefix = config.modulePrefix;
  podModulePrefix = config.podModulePrefix;
  Resolver = Resolver;
}

loadInitializers(App, config.modulePrefix);

// single-spa configs
const emberLifeCycles = singleSpaEmber({
  App,
  appName: 'login', // same name as ember app name & loadEmberApp name inside root app.
  createOpts: {
    rootElement: '#explorviz-login',
  },
});

const cssLifeCycles = singleSpaCss({
  // required: a list of CSS URLs to load
  // can be omitted if webpackExtractedCss is set to true, do not specify webpack extracted css files here
  cssUrls: ['http://localhost:4400/assets/login.css'],

  // optional: defaults to false. This controls whether extracted CSS files from webpack
  // will automatically be loaded. This requires using the ExposeRuntimeCssAssetsPlugin,
  // which is documented below.
  webpackExtractedCss: false,

  // optional: defaults to true. Indicates whether the <link> element for the CSS will be
  // unmounted when the single-spa microfrontend is unmounted.
  shouldUnmount: true,

  // optional: defaults to 5000. The number of milliseconds to wait on the <link> to load
  // before failing the mount lifecycle.
  timeout: 5000,
});

export const bootstrap = [cssLifeCycles.bootstrap, emberLifeCycles.bootstrap];
// export const bootstrap = emberLifeCycles.bootstrap;
export const mount = [cssLifeCycles.mount, emberLifeCycles.mount];
// export const mount = emberLifeCycles.mount;
export const unmount = [emberLifeCycles.unmount, cssLifeCycles.unmount];
// export const unmount = emberLifeCycles.unmount;

[rajasegar]

@billyjov No, I haven't tried that yet.

[billyjov]

@rajasegar could you find out whats going wrong.

I tried inside my ember-cli-build.js following:

  app.import('node_modules/single-spa-css/lib/umd/single-spa-css.min.js', {
    using: [
      {
        transformation: 'amd',
        as: 'single-spa-css',
      },
    ],
  });

But i get another error:

[rajasegar]

The CSP policy is not allowing in-secure (http) endpoints to load stylesheets. It is present in the root-cong/src/index.ejs file https://github.com/billyjov/poc-explorviz/blob/3b94ef077b97ffbcf5d7b6361b3ac9f32949ed1d/src/index.ejs#L20 if you comment that line you won't get that error, but for production environments we need that one I guess.

[rajasegar]

One more thing I found out is in your navbar app, you are using SASS but you are not using any plugin for it, so the app css is not generated. I renamed the file app.scss => app.css , now it was generating properly https://github.com/billyjov/poc-explorviz/blob/master/apps/navbar/app/styles/app.scss

[billyjov]

Thanks for the advices.