VueでCSSを参照する方法

Vue は CSS メソッドを指します: 1. グローバル導入、構文形式は「import 'css file address'」; 2. ローカル導入、構文形式は「@import 'css file」アドレス' ;”。

このチュートリアルの動作環境: Windows7 システム、vue2.9.6 バージョン、Dell G3 コンピューター。

Vue (/vjuː/ と発音、ビューに似ています) は、ユーザー インターフェイスを構築するための進歩的な JavaScript フレームワークです。他の大きなフレームワークとは異なり、Vue は下から上にレイヤーごとに適用されるように設計されています。

外部 CSS ファイルを vue に導入する:

プロジェクトの src ファイルの下に、CSS ファイルを保存する新しいスタイル フォルダーを作成します。

1. Global import

スタイル ファイルの下に外部の css ファイルを置きます。外部ファイルを導入するには、main.js ファイルにインポートするだけです。

import './style/reset.css'

導入しました明確なデフォルト スタイル CSS ファイル

2。ローカルの導入

<style scoped>
  @import &#39;../assets/iconfont/iconfont.css&#39;;这个分号一定要写，要不会报错
</style>

@import CSS@ ルールは、他のスタイル シートからスタイル ルールをインポートするために使用されます。これらのルールは、@charset ルールを除く他のすべてのタイプのルールよりも前に置く必要があります。これはネストされたステートメントではないため、@import はルールの条件付きグループ内で使用できません。

したがって、ユーザー エージェントはサポートされていないメディア タイプのリソースの取得を回避でき、作成者はメディアに依存する @import ルールを指定できます。これらの条件は、URI の後にカンマで区切って指定されたメディア クエリをインポートします。メディア クエリがなければ、インポートは無条件で行われます。すべてのメディアが同じ効果を持つことを指定します。

[推奨学習: JavaScript 上級チュートリアル]

以上がVueでCSSを参照する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。