10

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! :)

Phil
  • 2,232
  • 1
  • 26
  • 35
  • 2
    And here I am minutes after posting this question to find that the [systemjs](https://github.com/systemjs/plugin-css#modular-css-concepts) document states *the order of CSS injection can't be guaranteed* and that I'm just going to have to make my overrides more specific! – Phil Aug 27 '15 at 20:07

4 Answers4

7

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.

brass monkey
  • 5,841
  • 10
  • 36
  • 61
4

We have some stuff in the pipeline that should help you with this issue. If you check out this:

<template>
  <require from="nav-bar.html"></require>
  <require from="bootstrap/css/bootstrap.css"></require>

  <nav-bar router.bind="router"></nav-bar>

  <div class="page-host">
    <router-view></router-view>
  </div>
</template>

I know that Aurelia will be passing the CSS files to the loader in order, but I'm not sure if we'll be able to guarantee loading order. Hopefully Rob can come over here and give a proper answer to this, though. I'll point him in this direction.

Ashley Grant
  • 10,879
  • 24
  • 36
  • Thanks @Ashley. I've also tried the following in app.html: ` ` But whilst the debug says *DEBUG [templating] importing resources for app.html ["bootstrap/css/bootstrap.css!", "app.css!"]* I'm still seeing app.css first in . I've also seen [aurelia-css](https://github.com/Aaike/aurelia-css) and gave it a very brief spin but didn't get it to work just yet. – Phil Aug 28 '15 at 07:50
  • Interestingly if I import bootstrap.css but require app.css then the order is preserved... but I don't know if this is just blind luck or down to Aurelia's pipeline. – Phil Aug 28 '15 at 08:05
  • Phil, the code I showed above isn't released yet. Hopefully it'll be released in the next week or so. We don't currently support the syntax from above. – Ashley Grant Aug 28 '15 at 14:16
4

I had exactly the same problem. Controlling order of CSS is not possible in JSPM. I solved this problem with SASS and some tricks. Here's what I've done:

In html you give main element some id:

<html id="some-id">

Then you create sass file that will host your overrides (_overrides.scss):

#some-id {
  @import "buttons";
}

Now your buttons.scss can override styles from bootstrap (_buttons.scss):

.btn-default {
  background-color: #B6B3C7;
  border-color: #B33A3A;
}

This works thanks to the principle in CSS - most specific selector wins. By wrapping all your customizations in #some-id in scss it will produce code with every bit of code that is imported into curly braces prefixed by #some-id. This way your selector will always be more specific than bootstrap one and will override it.

I don't know if this will be sufficient for you as you don't mention scss, but it was for me.

Mateusz Jamiołkowski
  • 552
  • 3
  • 12
1

I've faced similar issue during development. The code below has helped me solve my problem. Now everything is loading exactly the way I want it.

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

Thanks LazerBass for this suggestion.

Paul Roub
  • 36,322
  • 27
  • 84
  • 93
arif.khan.b
  • 311
  • 3
  • 8