vue書くスタイルの2つの方法

875 ワード

方式一
この方式ではサードパーティ製ライブラリのスタイルを直接書くことができます
home.vue

style - home.scss
.home {

}

すべてのvue単一ファイルには独自のスタイルファイルがあり、すべてのスタイルファイルはstyleフォルダに配置され、各ファイル間のスタイルが相互に影響しないように、各ファイルの最外層ノードに個別のクラス名区分を定義します.すべてのスタイルファイルを1つのファイルにインポートし、main.jsファイルにstyle-indexを導入する.scss
@import './home.scss';
@import './me.scss';

main.js
import '@/styles/index.scss'

方式2
各vue単一ファイルに独自のスタイルを書き、scopedプロパティを追加します.このようにサードパーティ製ライブラリのスタイルを書く場合は、深度作用セレクタを使用する必要があります.


またはスタイルを別のファイルに抽出します.


関連リファレンス
scopedプライベート役割ドメインとdeep selector深さ作用セレクタ
検索サイト
検索サイト