Bootstrap 样式优先于自定义 CSS

Question

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

我遇到的问题是，当我从 'external.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

确保您的自定义 CSS 具有正确的针对性元素。

Answer 2

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

我在 Bootstrap 的 CSS 之后加载我的组件，其中包括我的路由器（其中包括加载我的自定义的外部路由样式）。只需将我的路由器的 import/use 语句移动到 Bootstrap 的语句下方即可解决问题。

Bootstrap 样式优先于自定义 CSS

Bootstrap Styles Taking Precedence Over Custom CSS

vue.js

bootstrap-4

vue-router

vue-component

bootstrap-vue