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

Question

我正在使用 BootstrapVue 并已按照文档进行设置。我看到的是，对于我的 Vue 应用程序中使用 BootstrapVue 组件的每个组件，我都将 Bootstrap 嵌入到我呈现的 HTML 中。在本例中，我添加了 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

这个问题已经解决了:)

问题是由于将引导程序 scss 文件包含在一个 scss 文件中，该文件是 @imported 到 Vue 的 main.js 中，以便引导程序的混合可以用于单个文件组件的样式

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