Question

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

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

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

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

非常感谢提前！：）

Answer 1

您可以尝试使用System.import导入css。例如。在你的index.html中：

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

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

Answer 2

我们在管道中有一些东西可以帮助您解决这个问题。如果你看看这个：

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

我知道Aurelia会按顺序将CSS文件传递给加载程序，但我不确定我们是否能够保证加载顺序。希望Rob能来到这里并给出一个正确的答案。我会指出他朝这个方向发展。

Answer 3

我有完全相同的问题。在JSPM中无法控制CSS的顺序。我用SASS和一些技巧解决了这个问题。这就是我所做的：

在html中，你给main元素一些id：

<html id="some-id">

然后创建将托管覆盖的sass文件（_overrides.scss）：

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

现在您的buttons.scss可以覆盖bootstrap（_buttons.scss）中的样式：

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

这要归功于CSS中的原则 - 最具体的选择器获胜。通过将所有自定义包装在scss中的＃some-id中，它将生成代码，每个代码都导入到以＃some-id为前缀的花括号中。这样，您的选择器将始终比bootstrap one更具体，并将覆盖它。

我不知道这对你是否足够，因为你没有提到scss，但它适合我。

Answer 4

我在开发过程中遇到过类似的问题。下面的代码帮助我解决了我的问题。现在一切都按照我想要的方式加载。

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

感谢LazerBass提出这个建议。

使用jspm和system.js导入CSS并控制顺序

4 个答案: