ホームページ > ウェブフロントエンド > Vue.js > vue.jsにCSSファイルを導入する方法

vue.jsにCSSファイルを導入する方法

coldplay.xixi
リリース: 2020-11-17 18:14:10
オリジナル
4132 人が閲覧しました

vue.js に CSS ファイルを導入する方法: 1. [main.js] でグローバルにインポートします。コードは [import "./common/uni.css"] です。 2. に直接導入します。コンポーネントのコードは [@import "/common/uni.css";] です。

vue.jsにCSSファイルを導入する方法

【おすすめ関連記事:vue.js

vue.js に css ファイルを導入する方法:

css ファイルを導入する 2 つの方法

最初の 1 つ: js の導入

は通常、main.js でグローバルに導入される、つまり次のような書き方になります:

import "./common/uni.css"
ログイン後にコピー

注:

1. この書き方が適用されます。こちら cssファイルがプロジェクト内に存在するため、URLアクセスによる導入には適さないため、エラーが報告されます。

2. アプリ プラットフォーム v3 モードは現在、js ファイルでの「./common/uni.css」の参照をサポートしていません

2 番目のタイプ: CSS の導入

コンポーネントに直接導入するのは比較的簡単です

<style>
    @import "/common/uni.css";
</style>
ログイン後にコピー

注:

導入ステートメントの後にセミコロンを追加することをお勧めします。引用符は 1 つだけでも問題ありません。セミコロンなしで複数引用すると、エラーが報告されます。

もちろんrequire()を使って導入したものもあるのですが、とりあえずはimportを使うほうが慣れてきました。

関連する無料学習の推奨事項: javascript (ビデオ)

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

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート