6

6つのビュー(html)を持つプロジェクトがあります。これらのビューのそれぞれに対応するビューモデル(.js)とそのビュー(.css)用のスタイルシートがありますAurelia-CLIを使用したCSS管理:すべてのビューが、サイト全体に適用される別のCSSファイルをロードして競合を引き起こします。

aurelia-cliはファイルを自由に再帰し、すべての.jsと.cssファイルを2つのファイルに分割して、ページの読み込み時間とサイズを削減しながら参照できるようにします。 welcome.html、welcome.js、welcome.cssのウェルカムフォルダがあればwelcome.htmlのCSSを次のようにロードして<require from="./welcome.css"></require>とし、CSSはページロード時に<head></head>タグに挿入されます。 Iがのwelcome.html/welcome.cssからCSSルールは、このようにまだ適用されているウェブページの<head>タグ内に残っている次のビューにナビゲートするときにと

問題があります。私のアプリケーションで6つのビューをすべて閲覧した後は、<head>タグ内に6 <style>タグがあり、6ページすべてのルールが、ページがリフレッシュされるまでアンロードされずにすべてのページに適用されます。言うまでもなく、いくつかのページを訪問した後、サイト全体が混乱してしまいます。

だから私の質問は

  1. あるなぜこれが
  2. 機能ですが、私はここでのベストプラクティスをしないのですか?
  3. 訪問したときにページのCSSを読み込み、ナビゲートしたときに読み込みを解除し、新しいページを読み込む方法はありますか?

私はグローバルスタイルシート、ブートストラップ、CSSをアニメーション化し、私はHTMLに恒久的にアプリの残りを注入し14の相反するスタイルを持って一日の終わりに、素晴らしいフォントで10ページのアプリを持っていた場合に注入されるとに。

提案がありますか?読んでくれてありがとう。

答えて

2

似たような状況に直面して、長時間の実験をしたところ、私は簡単な結論に達しました。私はこの「CSSファイルをどこにでも注入する」アプローチが好きではありません。私はそれについて少し暴言を許してください。 :)

どうすればよいですか?

  • 私たちはすでに、通常のもの(ブートストラップ、フォント - 素晴らしいなど)を組み合わせたグローバルスタイルシートを作成しました。おそらく、それはindex.htmlの頭の部分にあります。もちろん、アプリが読み込まれる前に素敵なスプラッシュ画面を表示したいからです。 Even in the official skeleton-navigation app
  • <require>を避けるもう1つの理由は、非同期性であり、CSS load orderを制御することはほとんどありません。 JSモジュール/カスタム要素には最適ですが、複数のCSSファイルには適していません。
  • 最後に、これらの他のタグが各ビューに配置されています。これは、既に単純な状況をさらに単純なものにするためです。

したがって、残りのアプリスタイルシートをこの既存のグローバルスタイルシートに明示的な順序でパックするのは簡単ではありませんか?

私の提案

オーレリア-CLIはgeneratorsと呼ばれる大きな特徴を持っています。必要に応じて機能を拡張することができます。 これを念頭において、カスタムCSS前後の処理のための新しいタスクを作成し、それらをビルドプロセスに挿入することができます。

  • あなたはプロセスを完全に制御できます。
  • 1つの縮小されたファイルが作成されます。予想されるCSSの読み込み順にすべてが含まれます。
  • 小さなアプリケーションのCSSファイルサイズは〜10-30KBに似ています。それは傷つけません。 :)

私は、この問題に対処する小さなプロジェクトのカップルを作成しました:aurelia-custom-skeleton。作業デモhere。ビルドプロセス中に

  1. 、それはグローバルDEPSからbase.cssを作成し、カスタムCSSファイルからapp.css。これはデバッグのためのものです。
  2. これらの2つのファイルは、に結合されています。このファイルは、展開され、index.htmlで参照されています。
  3. 本当に自己実行可能なアプリケーションを外部ファイルなしで作成する必要がある場合は、この1つの結合スタイルシートを埋め込むことができます。
+0

なぜ私はaureliaがCSSをアンロードしないのか混乱させていると思います。私は、複数のページでCSSを使って音声ロジックを見つけられません。これはどのようなメリットがありますか?私はあなたの解決策を見ていきますが、これがgithubの問題として浮上しているのだろうかと思います。利点が得られない場合は修正する必要があります。 –

+0

あなたは希望の順序でscssファイルをインポートするためにsassの@import機能を使用できませんでしたか?次に、アプリケーション自体からトップレベルのscssファイルを要求するだけです。 – pQuestions123

+0

実際には、特定の変数ファイル(つまり色など)に設定された変数にアクセスできないという別の問題が発生します。私の解決策は、すべてのscssを1つのマスターscssファイル(上にcolors.scssをインポートする)にインポートすることです。その後、すべてのファイルのすべての色にアクセスできます。あなたがする必要があることは、その1つのマスターファイルをトランキライズすることだけです。 – pQuestions123

関連する問題