vueプロジェクトのスタイルロード順序

ロード順はmain.jsではimportantの導入順序が主で、後に導入するスタイルは先に導入するスタイルを上書きします
ローカル実行時には、Appおよびrouter関連スタイルの重み値が最も高くなります.

import App from './App'
//   App.vue   style   


import router from './router'
//   view  components    style   

ローカル実行時のcssロード順序:

mainを順番にロードする.jsでimportantが導入したスタイルおよびコンポーネント(Appおよびrouterを除く)

はAppをロードする.vueにおけるstyleおよび関連コンポーネントstyle

現在のページstyleおよびページ関連コンポーネントstyle

をロードする.

ビルド(オンラインにパブリッシュ)後:

app.xxx.cssロード順:mainを順番にロードする.jsでimportantが導入したスタイルおよびコンポーネント(Appおよびrouterを含む)
router内部ロード順序:

notfoundファイルstyleロード

共通コンポーネントstyleロード

ページstyleおよびページコンポーネントstyleロード

cssの順序は「要素上のstyle」>「ファイルヘッダ上のstyle要素」>「外部スタイルファイル」です.

スタイルシートのエレメントセレクタの選択が正確であるほど、idセレクタが指定するスタイル>クラスセレクタが指定するスタイル>エレメントタイプセレクタが指定するスタイルが優先されるため、前述の例では、#navigatorのスタイルの優先度が大きい.current_blockの優先度は、たとえ.current_blockは最新に追加されたもので、役に立たない.

同じタイプのセレクタで作成されたスタイルでは、スタイルシートファイルでは、エレメントclassが現れる順序ではなく、後の優先度が高いことに注意してください.例えば.class 2はスタイルシートに表示されます.class 1以降

仕様:

main.jsファイル導入順序
1、静的cssファイル
2、UIコンポーネントライブラリ
3、App
4、router
*グローバルスタイルはできるだけApp.vueに導入する、具体的な業務にglobalを導入する、何回導入する、app.cssでは何回パッケージ化されますか

CSSのlinkとimportのロード順序：

1、importとlinkの違い:@import url(「CSSアドレス」)CSS専用文法作用:@importはチーム分業に作用し、最後に合併してもよい.cssでは、1つのcssファイルに追加のCSSファイルを導入できるか、ラベルで以下のように使用できます.
link:リンクrelation:関連付け(省略可能)type:タイプhref:HyperText Referenceハイパーテキスト参照作用:主にCSSとページアイコンを導入し、検索エンジン、ページ間の関係を知らせることを示す
2、linkとimportのロード順序レベル:linkがimportより優先的にロード順序がウェブサイトのフロントの再構築(ウェブページ構造の最適化、性能)に影響する第一:HTML、同時にlink、CSSとimportをロードするスタイル

HTMLロード:

1 HTML-DOM構造2 CSS,JS 3ピクチャをロードし、マルチメディア4ロードが完了するとonloadイベントがトリガーされます第2:ロード順序がウェブサイトに与える影響:import:importを下に置き、データが先に出て、それからlinkを美化します:CSSを優先して、ロードしながら、linkをレンダリングしてどこに置いても優先的にロードして、importはコードの順序の影響を受けます
自分のCSSでlinkを使うことを提案して、前に第三者を使います:import,jsは底に置いて、自分のウェブサイトに影響しません