☰

Vue での Bootstrap CSS のスコープ 質問する

tag-icon • tag-icon css twitter-bootstrap webpack vue.js vue-loader
Vue での Bootstrap CSS のスコープ 質問する

私は 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 を使ったハック

最初の解決策が機能しない理由:

スコープを設定すると、親コンポーネントのスタイルが子コンポーネントに漏れなくなります。

スコープ付きスタイルのセレクタを「深く」したい場合、つまり子コンポーネントに影響を与える場合は、>>>コンビネータを使用できます。

からスコープ付き CSS の Vue ドキュメント

あなたが言及したモーダルは、どうやらブートストラップをインポートしたコンポーネントによって制御されていないようです。おそらく子コンポーネントです。おそらく、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全体をインポートするのは本当に悪い習慣です。使用するものだけをインポートするようにしてください。ブートストラップ サスその代わり。

この解決策はハッキーです。しかし、これがあなたのユースケースで機能する唯一の方法だと私は知っています。

おすすめ記事