私は Vue コンポーネントで Bootstrap を使用しようとしており、すべての CSS をスコープ設定したいと考えています。次のようなことを試しました:
<style scoped>
@import "~bootstrap/dist/css/bootstrap.css";
@import "~bootstrap-vue/dist/bootstrap-vue.css";
</style>
しかし、CSS がスコープ指定されていないようです。それを実行する方法はありますか?
ベストアンサー1
<style scoped src="~bootstrap/dist/css/bootstrap.css"></style>
<style scoped src="~bootstrap-vue/dist/bootstrap-vue.css"></style>
アップデート: SCSS を使ったハック
最初の解決策が機能しない理由:
スコープを設定すると、親コンポーネントのスタイルが子コンポーネントに漏れなくなります。
スコープ付きスタイルのセレクタを「深く」したい場合、つまり子コンポーネントに影響を与える場合は、>>>コンビネータを使用できます。
あなたが言及したモーダルは、どうやらブートストラップをインポートしたコンポーネントによって制御されていないようです。おそらく子コンポーネントです。おそらく、Bootstrap モーダルの jQuery バージョンを使用しているのでしょう。いずれにしても、データ属性はモーダルに追加されません。
これを解決するには、Deep Selectorが必要です。(詳細については、https://vue-loader.vuejs.org/en/features/scoped-css.html)
SCSS を使用して Bootstrap CSS 全体をインポートする方法は次のとおりです。(純粋な CSS のみを使用してこれを行うのは不可能だと思います。)
<template>
<div class="main-wrapper">
/* ... */
</div>
</template>
<style scoped lang="scss">
.main-wrapper /deep/ {
@import "~bootstrap/dist/css/bootstrap.min";
}
</style>
Sass などの一部のプリプロセッサは、>>> を適切に解析できない場合があります。その場合は、代わりに /deep/ コンビネータを使用できます。これは >>> のエイリアスであり、まったく同じように機能します。
生成されたCSSは次のようになります。
.main-wrapper[data-v-656039f0] .modal {
/* some css... */
}
..それがあなたが望むものなのです。
しかしBootstrap CSS全体をインポートするのは本当に悪い習慣です。使用するものだけをインポートするようにしてください。ブートストラップ サスその代わり。
この解決策はハッキーです。しかし、これがあなたのユースケースで機能する唯一の方法だと私は知っています。