Bootstrap CSS loads last and overrides custom styles

[waywardz]

I'm submitting a bug report

• Library Version: major.minor.patch-pre aurelia-bootstrapper@1.0.0-beta.2.0.1 -> aurelia-bootstrapper@1.0.0

Please tell us about your environment:

• Operating System: RHEL
• Node Version: v4.2.5
• NPM Version: 3.5.1
• JSPM OR Webpack AND Version JSPM 0.16.34
• Browser: all
• Language: ESNext

Current behavior: Bootstrap overrides custom styles (see https://github.com/aurelia/skeleton-navigation/issues/659)

Expected/desired behavior: Resources are loaded in the order they are required.

This is a duplicate of https://github.com/aurelia/skeleton-navigation/issues/659, however, through some trial and error I believe changes in this module are the cause, and the issue occurred between aurelia-bootstrapper@1.0.0-beta.2.0.1 and aurelia-bootstrapper@1.0.0.

[waywardz]

I think these are also in play. I noticed when I backed down the bootstrapper it also backed down the dependencies

"aurelia-templating-binding": "npm:aurelia-templating-binding@1.0.0-beta.2.0.2", "aurelia-templating-resources": "npm:aurelia-templating-resources@1.0.0-beta.3.0.4",

[EisenbergEffect]

@AshleyGrant Can you look into this?

[AssafDamari]

Any news regarding this? We can't use any custom themes due to this issue.

[EisenbergEffect]

@AssafDamari As a work around, consider traditionally linking bootstrap in the head.

[EisenbergEffect]

@AshleyGrant Ping.

[AshleyGrant]

Looking in to it

[AshleyGrant]

So the problem looks to be that this is all "promisified," and since it takes less time to load the smaller custom css file than the larger bootstrap css file, the custom css file wins the race to be added to the DOM. We would need to make sure the promises execute in order, or depromisify the loader code.

[waywardz]

I took a look at 474 which is now closed, unfortunately I couldn't see jdanyow's suggestions as the links to the gitter didn't work for me.

Would it be possible to group priority loads together somehow? I don't expect to personally have more than bootstrap, but maybe an attribute that tells the loader to create one or more groups based on the priority set?

In my case I have something like this:

<require from="font-awesome/css/font-awesome.min.css"></require>
<require from="bootstrap/css/bootstrap.css"></require>
<require from="styles/css/box-selector.css"></require>
<require from="styles/css/my-style-guide.css"></require>
<require from="styles/css/jquery-ui.min.css"></require>

<require from='top-header'></require>
<require from='side-bar'></require>

my issue is that my-style-guide.css loads before bootstrap.

Would it be possible to add something like <require loadorder="1" from="bootstrap/css/bootstrap.css"></require> to indicate I want bootstrap loaded first?

[waywardz]

A possible workaround is to add another require with a nested require in it, allowing any overrides to be collected in one location.

in app.html

<require from='custom-css'></require>

in another file (that has an empty backing class)

<template>
    <require from="styles/css/my-style-guide.css"></require>
</template>

It looks like it loads the dependencies in groups, so it'll do the groups for app.html first, then the dependencies of custom-css.html.

[plwalters]

Just switch to loading Bootstrap from CDN in the head of the index.html, it's a better solution anyways.

[AshleyGrant]

@EisenbergEffect could we move this issue to the templating repo?

[EisenbergEffect]

Issue moved to aurelia/templating #514 via ZenHub