10

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

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

我希望 app.css 排在第二位，因为它会覆盖 bootstrap.css 样式。但是，我首先获取 app.css，因为我认为 system.js 加载器正在并行运行它们，并且 app.css 是它首先加载的两者中较小的一个。

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

提前谢谢了！:)

4

4 回答 4

7

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

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

但请记住，通过这种方式，您必须确保 system.js 与您的应用程序一起提供。因此，您不能将整个应用程序捆绑为一个自动执行的捆绑包。

于 2015-10-15T08:37:46.253 回答
4

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

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

<html id="some-id">

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

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

现在您的buttons.scss 可以覆盖引导程序（_buttons.scss）中的样式：

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

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

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

于 2015-08-30T20:49:56.273 回答
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>

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

于 2015-08-27T23:25:40.647 回答
1

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

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

感谢 LazerBass 的建议。

于 2016-06-04T16:12:43.660 回答