10

私はAureliaアプリで次のように書いています

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

そして、bootstrap.css スタイルをオーバーライドするので、2 番目に app.css が必要です。ただし、system.jsローダーがそれらを並行して実行していると推測し、app.cssは最初にロードされる2つのうち小さい方であるため、最初にapp.cssを取得しています。

これらの2つのファイル間の依存関係を定義してロード順序を制御する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

この問題の解決に役立つパイプラインがいくつかあります。これをチェックすると：

<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 ファイルを順番にローダーに渡すことはわかっていますが、読み込み順序を保証できるかどうかはわかりません。うまくいけば、ロブがここに来て、これに適切な答えを出すことができます. 私は彼をこの方向に向けます。

于 2015-08-27T23:25:40.647 に答える
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 に答える
1

開発中に同様の問題に直面しました。以下のコードは、私の問題を解決するのに役立ちました。今、すべてが思い通りにロードされています。

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

この提案をしてくれた LazerBass に感謝します。

于 2016-06-04T16:12:43.660 に答える