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

前端未结

关注

 4  667

I\'ve written the following in an Aurelia app

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

and I want app.css second in sin

相关标签:

4条回答

一个人的身影

2021-02-08 12:52
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.
0 讨论(0)
发布评论:

提交评论
- 加载中...
轻奢々

2021-02-08 12:56
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.
0 讨论(0)
发布评论:

提交评论
- 加载中...
梦毁少年i

2021-02-08 12:56
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.
0 讨论(0)
发布评论:

提交评论
- 加载中...
轻奢々

2021-02-08 13:08
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.
0 讨论(0)
发布评论:

提交评论
- 加载中...