Vueにcssを追加します.JSプロジェクト

これは“Working with CSS in Vue.js”から始まる一連の記事の一部です.この記事の焦点は、VueにCSSを加える異なった方法にあります.プロジェクト.

グローバルスタイルファイル
あなたのスタイルファイルを分離するのを好むならば、...Vueファイルとスタイルタグは、フレームワークなしでワークフローと同様に、これを実現することができます.スタイルファイルをこの方法で設定すると、スタイルはテンプレートセクションに適用されますが、コンポーネントスタイルタグでは使用できません.
注意:たとえば、スタイルファイルにSSS変数を作成すると、コンポーネントスタイルタグ内で使用する場合は認識されません.コンポーネントスタイルタグで利用可能なグローバルスタイルを取得するには、article about importing global styles in component style tagsを参照してください.
あなたのスタイルファイルのためにあなたのフォルダとファイル構造をセットしてください.SCSSあなたがフォルダで構造を使うならば、ファイル名.SCSSとSCSSのインポートは、これはSSSサポートを追加した場合に動作します.( SCSSサポート追加に関する記事242479152参照)
あなたのメインで.JSファイル、Vueインポートの下でスタイルをインポートします

import './styles/style.scss'

“Working with CSS in Vue.js”
Vueファイルのスタイルタグ
CSSを処理するデフォルトのバージョンは、Vueファイルスタイルタグにあなたのスタイルを書くことです.
このように書かれたスタイルはグローバルです.ここで定義されているスタイルは、プロジェクトの他の場所で利用可能です.vueファイル.

<style>
  /*…write your styles here*/
</style>

スコープ・スタイラス
スコーピングは、互いにスタイルを漏らすことからそれらを保つために異なるクラスにデータ属性を加えることを意味します.スコープはCSSモジュールに似ています(記事 についてはこちらをご覧ください).
中でコンポーネントスタイルタグに「Scoped」を加えてください.vueファイル:

<style scoped>
  /*add scoped styles here*/
</style>

“CSS Modules in Vue.js”
スタイルカスケード
子コンポーネントに親コンポーネントで共有されるクラス名がある場合、親コンポーネントのスタイルは子プロセスにカスケードします. でネストすることについてもっと読んでください.
スコープの親の子を対象とするには、次のようにします..parent >>> child { /*styles*/ }どのプリプロセッサが使用されるかによってどの構文が働くか.また、.parent /deep/ child{ /*styles*/ }.parent ::v-deep child{ /*styles*/ }deep selector in the documentationでこれを読んでください.
vue-loader documentation
セットアップ
この記事の開始コードは、VueのCLIコマンドツールバージョン3.3.0とVueによって作成されます.JSバージョン2.6.10 .セットアップ、プラグイン、およびフレームワークの両方が進化していることに注意してください.変化は、このポストで説明されるテクニックをより関連しないようにするために、最も確かに起こります.