vue書くスタイルの2つの方法
875 ワード
方式一
この方式ではサードパーティ製ライブラリのスタイルを直接書くことができます
home.vue
style - home.scss
すべてのvue単一ファイルには独自のスタイルファイルがあり、すべてのスタイルファイルはstyleフォルダに配置され、各ファイル間のスタイルが相互に影響しないように、各ファイルの最外層ノードに個別のクラス名区分を定義します.すべてのスタイルファイルを1つのファイルにインポートし、main.jsファイルにstyle-indexを導入する.scss
main.js
方式2
各vue単一ファイルに独自のスタイルを書き、scopedプロパティを追加します.このようにサードパーティ製ライブラリのスタイルを書く場合は、深度作用セレクタを使用する必要があります.
またはスタイルを別のファイルに抽出します.
関連リファレンス
scopedプライベート役割ドメインとdeep selector深さ作用セレクタ
検索サイト
検索サイト
この方式ではサードパーティ製ライブラリのスタイルを直接書くことができます
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深さ作用セレクタ
検索サイト
検索サイト