BootstrapVue - Bootstrap CSS 被多次添加到我的 Vue 应用程序

Question

我正在使用 BootstrapVue 并已按照文档进行设置。不过，我看到的是，对于我的 Vue 应用程序中使用 BootstrapVue 组件的每个组件，我都在呈现的 HTML 中嵌入了 Bootstrap。在本例中，我添加了 27 个相同样式表的实例。

我看不出问题出在哪里。

这是我的 main.js 文件

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import { BRow, BCol, BContainer  } from 'bootstrap-vue'
import {InlineSvgPlugin} from "vue-inline-svg/dist/vue-inline-svg";
import VueSvgIconPolyFill from "@yzfe/vue-svgicon-polyfill";

Vue.config.productionTip = false

Vue.use(VueSvgIconPolyFill);
Vue.use(BCol, BRow, BContainer)
Vue.use(require('vue-moment'))
Vue.use(InlineSvgPlugin)

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

下面是一个使用 BootstrapVue

的 Vue 组件示例

<template>
    <section class="latest-news">
        <b-container>
            <b-row class="latest-news__title-bar">
                <b-col class="d-flex align-items-center" :sm="12" :md="10">
                    <h2>
                        {{blockTitle}}
                        <a
                                href="#"
                                title="Collapse this section"
                                :class="`collapse-control ` + (isCollapsed ? 'collapse-control--collapsed' : '')"
                                @click.prevent="isCollapsed = !isCollapsed"
                                v-html="(isCollapsed) ? 'Show' : 'Hide'"
                        ></a>
                    </h2>
                </b-col>
                <b-col class="d-flex justify-space-around" v-if="showSearchBar">
                    <ContentSearchBar title="Search news"/>
                </b-col>
                <b-col class="d-flex justify-content-end">
                    <Toolbar controls="news" :display-sorter="false" v-if="!isCollapsed && news.length"/>
                </b-col>
            </b-row>
            <b-row v-if="!isCollapsed">
                <b-col
                        cols="12"
                        :sm="smCols"
                        :md="mdCols"
                        v-for="(item, index) in news"
                        :key="`news` + index"
                       :class="((index < numberNewsItems) || !numberNewsItems) ? `latest-news__col` : ``"
                >
                    <NewsItem
                            v-if="(index < numberNewsItems) || numberNewsItems === null"
                            :show-excerpt="showExcerpt"
                            :news="item"
                            :item-index="index"
                            :format="newsListFormat"
                    />
                </b-col>
            </b-row>
            <b-row v-if="news && news.length === 0 && isSearch && !isCollapsed">
                <b-col cols="12">There are no news item results for your search term "{{$route.params.query}}"</b-col>
            </b-row>
        </b-container>
    </section>
</template>

<script>
  import NewsItem from "./NewsItem";
  import ContentSearchBar from "./ContentSearchBar";
  import Toolbar from "./Toolbar";
  import store from '../store';
  import {mapGetters} from 'vuex';
  import NewsService from '../services/NewsService'

  export default {
    name: "LatestNews",
    store: store,
    props: {
      showExcerpt: {
        default: true,
      },
      showSearchBar: {
        default: false,
      },
      numberNewsItems: {
        default: null
      },
      'isSearch': {
        default: false
      },
    },
    data() {
      return {
        news: [],
        isCollapsed: false
      }
    },
    mounted() {
      if (this.isSearch) {
        this.searchNews()
      } else {
        this.getNews()
      }
    },
    methods: {
      async getNews() {
        const response = await NewsService.all()
        this.news = response.data
      },
      async searchNews() {
        let query = this.$route.params.query;
        const response = await NewsService.search(query);
        this.news = response.data.results
      }
    },
    components: {Toolbar, ContentSearchBar, NewsItem},
    computed: {
      blockTitle() {
        if (this.isSearch) {
          return 'News search results for "' + this.$route.params.query + '"'
        } else {
          return 'Latest News'
        }

      },
      ...mapGetters([
        'newsListFormat'
      ]),
      smCols() {
        if (this.newsListFormat === 'list') {
          return '12'
        } else {
          return '6'
        }
      },
      mdCols() {
        if (this.newsListFormat === 'list') {
          return '12'
        } else {
          return '3'
        }
      },
    }

  }
</script>

<style lang="scss">
    .latest-news {
        &__col {
            margin-bottom: 24px;
        }

        &__title-bar {
            margin-bottom: 20px;

            h2 {
                margin-bottom: 0;
            }
        }
    }
</style>

这就是 Chrome 开发工具在 yarn serveed

时显示 HTML 的方式

Answer 1

已解决:)

问题是由于 bootstrap scss 文件包含在 scss 文件中，该文件被 @import 编辑到 Vue 的 main.js 中，因此Bootstrap 的 mixins 可以用于单个文件组件的样式

删除 Bootstrap scss 导入并在 main.js 文件中导入 bootstrap css 文件解决了问题。

BootstrapVue - Bootstrap CSS 被多次添加到我的 Vue 应用程序

BootstrapVue - Bootstrap CSS is being added to my Vue app multiple times

vue.js

bootstrap-vue