vue.js - Bootstrap 样式优先于自定义 CSS

Question

我有一个 Vue-2 项目，它使用(应该相关的)Vue-Router、Webpack 和 Bootstrap-Vue。我在我的应用程序的根目录加载 Bootstrap，因为它在我的应用程序中全局使用。在应用程序中，我将我的 View 分为内部和外部路由，并为各个页面提供子路由。我的所有外部路由都共享一些通用的 css 样式，因此我在外部路由的底部加载了“external.css”，以避免在每个组件中重新定义相同的 css。

我遇到的问题是，当我从“external.css”中提取样式时，Bootstrap 的 css 规则优先于我的自定义 css 规则，不是这些类在每个组件中本地定义。这不是作用域样式的问题，因为规则被应用到组件，只是在层次结构的前面，所以它们会被 Bootstrap 的规则覆盖。

我的理解是，因为我的“external.css”文件包含在应用程序层次结构的更下方，所以它的样式应该第二个应用(就像我使用 html 导入和 Bootstrap-Vue 在 external.css 之上一样)但是但是关于 webpack 如何处理导入的直觉可能是错误的。

这是我的基本文件 (main.js) 中的相关代码:

import Vue from "vue";
import App from "./App";

import BootstrapVue from "bootstrap-vue";

import "bootstrap/dist/css/bootstrap.css";
import "bootstrap-vue/dist/bootstrap-vue.css";

Vue.use(BootstrapVue);

/* eslint-disable no-new */
new Vue({
  el: "#app",
  router,
  store,
  components: { App },
  template: "<App/>"
});

在我的 External.vue 组件中:

<script>
export default {
  name: "External"
};
</script>

<style>
@import "../../assets/css/external_styles.css";
</style>

Answer 1

我几个月前就解决了这个问题，但我想人们可能想知道答案:

在我加载包含我的路由器的组件(其中包含加载我的自定义样式的外部路由)之后，我包含了 Bootstrap 的 CSS。。只需将我的路由器的导入/使用语句移动到 Bootstrap 的下方即可解决问题。