使用jspm和system.js导入CSS并控制<head>中的顺序

Question

使用jspm和system.js导入CSS并控制<head>中的顺序

我在Aurelia应用程序中写了以下内容

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

Run Code Online (Sandbox Code Playgroud)

我希望app.css位于第二位,因为它会覆盖bootstrap.css样式.但是,我首先得到app.css,因为我假设system.js加载器并行运行它们,因为app.css是它首先加载的两个中较小的一个.

有没有办法在jspm中定义这两个文件之间的依赖关系来控制它们的加载顺序是否还有其他一些方法？

提前谢谢了!:)

Answer 1

Laz*_*ass 7

您可以尝试使用System.import导入css.例如在index.html中:

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

Run Code Online (Sandbox Code Playgroud)

但请记住,这样您必须确保system.js与您的应用程序一起提供.因此,您无法将整个应用程序捆绑为自动执行的捆绑包.

Answer 2

Ash*_*ant 4

我们正在准备一些东西，可以帮助您解决这个问题。如果你看看这个：

<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>

Run Code Online (Sandbox Code Playgroud)

我知道 Aurelia 会按顺序将 CSS 文件传递给加载器，但我不确定我们是否能够保证加载顺序。不过，希望罗布能过来并给出正确的答案。我会向他指出这个方向。

归档时间：	10 年，2 月前
查看次数：	9251 次
最近记录：	9 年，5 月前