发表新帖
发表新帖

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

前端 未结
关注
4 668
夕颜
夕颜 2021-02-08 12:14

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条回答
  • 梦毁少年i
    梦毁少年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:

    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)
 看不清?
提交回复
热议问题