Bootstrap 样式优先于自定义 CSS

Posted 2023-02-22

【中文标题】Bootstrap 样式优先于自定义 CSS

【英文标题】：Bootstrap Styles Taking Precedence Over Custom CSS

【发布时间】：2019-09-22 09:41:42

【问题描述】：

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

我遇到的问题是 Bootstrap 的 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>

【参考方案1】：

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

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

【讨论】：

这为我节省了大量的调试时间。我对实现 css 有同样的问题。欣赏答案

【参考方案2】：

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