Importing CSS and controlling order in <head> using jspm and system.js

aurelia jspm systemjs
Phil picture Phil · Aug 27, 2015 · Viewed 9.4k times · Source

I've written the following in an Aurelia app

import "bootstrap/css/bootstrap.css!";
import "./app.css!";

and I want app.css second in since it overrides bootstrap.css styles. However, I'm getting app.css first since I presume the system.js loader is running them in parallel and since app.css is the smaller of the two it gets loaded first.

Is there a way in jspm to define a dependency between these two files to control their loading order is is there some other way?

Many thanks in advance! :)

Answer

brass monkey picture brass monkey · Oct 15, 2015

You could try to import the css using System.import. E.g. in your index.html:

System.import('bootstrap/css/bootstrap.css!').then(() => {
    System.import('./app.css!');
});

But keep in mind that this way you have to make sure that system.js is served with your app. So you can't bundle your whole app as an self-executing bundle.

Related questions

How to resolve "TypeError: NetworkError when attempting to fetch resource."

When I use aurelia-fetch-client to post json data to server and I got this error "TypeError: NetworkError when attempting to fetch resource." I think your answer is very useful to me. post.html <template> <section> <…

Read More
ResizeObserver - loop limit exceeded

About two months ago we started using Rollbar to notify us of various errors in our Web App. Ever since then we have been getting the occasional error: ResizeObserver loop limit exceeded The thing that confuses me about this is …

Read More
Bootstrap 4 error "Bootstrap dropdown require Popper.js", with Aurelia CLI and Require.js

I'm having trouble configuring Bootstrap 4 beta in an Aurelia CLI app (v0.31.1) with requirejs and using TypeScript. After having tried several config variations I keep on getting the following console error: Uncaught Error: Bootstrap dropdown require Popper.js Here are …

Read More