What about loading application specific styles ?

[billyjov]

This helper function https://github.com/single-spa/single-spa-ember/blob/master/src/single-spa-ember.js#L64 allow us to add app and vendor js files as params. What about css files ? Where should we import app specific styles?

[joeldenning]

One way to load app-specific styles is to use https://github.com/single-spa/single-spa-css

[billyjov]

@joeldenning Thanks for your response. I tried to load css file using single-spa-css but got an error that the module is not present.

But all modules was installed.

an inside the login app 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', 
  createOpts: {
    rootElement: '#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 mount = [cssLifeCycles.mount, emberLifeCycles.mount];
export const unmount = [emberLifeCycles.unmount, cssLifeCycles.unmount];

Any Advice on this ?

[joeldenning]

Old versions of ember don't read dependencies from node_modules, so it's possible that this is caused by that. @rajasegar can you comment on if ember requires special installation instructions for npm packages?

[rajasegar]

@billyjov What is the Ember version you are using? Do you have ember-auto-import installed? The recent versions of Ember comes with ember-auto-import by default. https://guides.emberjs.com/release/addons-and-dependencies/#toc_regular-npm-packages

[billyjov]

It's a new generated ember app using following dev dependencies

"devDependencies": {
    "@ember/optional-features": "^2.0.0",
    "@ember/test-helpers": "^2.2.0",
    "@glimmer/component": "^1.0.3",
    "@glimmer/tracking": "^1.0.3",
    "babel-eslint": "^10.1.0",
    "broccoli-asset-rev": "^3.0.0",
    "ember-auto-import": "^1.10.1",
    "ember-cli": "~3.25.3",
    "ember-cli-app-version": "^4.0.0",
    "ember-cli-babel": "^7.23.1",
    "ember-cli-dependency-checker": "^3.2.0",
    "ember-cli-htmlbars": "^5.3.2",
    "ember-cli-inject-live-reload": "^2.0.2",
    "ember-cli-sri": "^2.1.1",
    "ember-cli-terser": "^4.0.1",
    "ember-data": "~3.25.0",
    "ember-export-application-global": "^2.0.1",
    "ember-fetch": "^8.0.4",
    "ember-load-initializers": "^2.1.2",
    "ember-maybe-import-regenerator": "^0.1.6",
    "ember-page-title": "^6.2.1",
    "ember-qunit": "^5.1.2",
    "ember-resolver": "^8.0.2",
    "ember-source": "~3.25.1",
    "ember-template-lint": "^2.18.1",
    "ember-welcome-page": "^4.0.0",
    "eslint": "^7.20.0",
    "eslint-config-prettier": "^7.2.0",
    "eslint-plugin-ember": "^10.2.0",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-prettier": "^3.3.1",
    "loader.js": "^4.7.0",
    "npm-run-all": "^4.1.5",
    "prettier": "^2.2.1",
    "qunit": "^2.14.0",
    "qunit-dom": "^1.6.0"
  },

[billyjov]

@rajasegar just gave you the access to example repository with my current setup

[rajasegar]

Thanks @billyjov I got the invite and accepted, will check it and get back to you.