Импорт CSS и контроль порядка в <head> с использованием jspm и system.js

Я написал следующее в приложении Aurelia

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

и я хочу, чтобы app.css занял второе место, поскольку он переопределяет стили bootstrap.css. Однако сначала я получаю app.css, так как я предполагаю, что загрузчик system.js запускает их параллельно, и поскольку app.css является меньшим из двух, он загружается первым.

Есть ли способ в jspm, чтобы определить зависимость между этими двумя файлами, чтобы контролировать их порядок загрузки, есть ли другой способ?

Спасибо заранее!:)

Источник

4 ответа

Вы можете попробовать импортировать CSS, используя System.import. Например, в вашем index.html:

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

Но имейте в виду, что таким образом вы должны убедиться, что system.js поставляется с вашим приложением. Таким образом, вы не можете связать все свое приложение как самореализующийся пакет.

Источник

У нас есть кое-что, что должно помочь вам с этой проблемой. Если вы проверите это:

<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-файлы загрузчику по порядку, но я не уверен, сможем ли мы гарантировать порядок загрузки. Надеюсь, Роб сможет приехать сюда и дать правильный ответ на это, хотя. Я укажу ему в этом направлении.

Источник

У меня была точно такая же проблема. Управление порядком CSS невозможно в JSPM. Я решил эту проблему с SASS и некоторыми хитростями. Вот что я сделал:

В html вы даете основному элементу некоторый идентификатор:

<html id="some-id">

Затем вы создаете файл sass, который будет содержать ваши переопределения (_overrides.scss):

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

Теперь ваш button.scss может переопределить стили из начальной загрузки (_buttons.scss):

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

Это работает благодаря принципу CSS - выигрывает самый специфический селектор. Обернув все ваши настройки в #some-id в scss, вы получите код с каждым битом кода, который импортируется в фигурные скобки с префиксом #some-id. Таким образом, ваш селектор всегда будет более конкретным, чем начальный загрузчик, и переопределит его.

Я не знаю, будет ли этого достаточно для вас, поскольку вы не упоминаете scss, но это было для меня.

Источник

Я сталкивался с подобной проблемой во время разработки. Код ниже помог мне решить мою проблему. Теперь все загружается именно так, как я хочу.

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

Спасибо LazerBass за это предложение.

Источник
Другие вопросы по тегам