web-dev-qa-db-ja.com

スコープBootstrap Css in Vue

Bootstrap in a Vue component）を使用しようとしています。すべてのCSSにスコープを設定したいと思います。次のようなことを試しました：

<style scoped>
@import "~bootstrap/dist/css/bootstrap.css";
@import "~bootstrap-vue/dist/bootstrap-vue.css";
</style>

しかし、CSSがスコープされているようには見えません。それを行う方法はありますか？

csstwitter-bootstrapwebpackvue.jsvue-loader
12
vitalii
<style scoped src="~bootstrap/dist/css/bootstrap.css"></style>

<style scoped src="~bootstrap-vue/dist/bootstrap-vue.css"></style>

Update：SCSSを使用したハック

最初のソリューションが機能しない理由：

スコープを設定すると、親コンポーネントのスタイルは子コンポーネントにリークしません。

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

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

あなたが言及したモーダルは、ブートストラップをインポートしたコンポーネントによって制御されていないようです。おそらくそれは子コンポーネントです。おそらく、jqueryバージョンのBootstrap modalを使用しています。どちらの方法でも、データ属性はモーダルに追加されません。

これを解決するには、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... */
}

..これはあなたが望むものです。

[〜＃〜] but [〜＃〜]、私は言うべきです、全体をインポートするBootstrap CSSは本当に悪い習慣です。代わりに bootstrap-sass から使用するものだけを正確にインポートしてください。

このソリューションはハックです。しかし、それが私が知っている唯一の方法であり、あなたのユースケースでうまくいくことができます。

20
Jacob Goh

私は自分のアプリでvuetifyをページでのみ使用したかったので、CSSがクラッシュしました。

 <style scoped src="vuetify/dist/vuetify.min.css"></style>

そして今、すべてが完璧に動作します。

<template>
  <div> .......  </div>
</template>

<style scoped src="vuetify/dist/vuetify.min.css"></style>
<script> ...... </script>
1
Ing Oscar MR

今日のソリューションを読むときに注意してください：

Scoped属性は非推奨であり、削除されます。使用しないでください。

- https://www.w3schools.com/tags/att_scoped.asp

0
STORMS-MEDIA