时间戳

首页 > 解决方案 > Bootstrap 样式优先于自定义 CSS

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

问题描述

我有一个 Vue-2 项目，它使用（应该相关的）Vue-Router、Webpack 和 Bootstrap-Vue。我在我的应用程序的根目录中加载 Bootstrap，因为它在我的应用程序中全局使用。在应用程序中，我将视图分为内部路由和外部路由，以及各个页面的子路由。我所有的外部路由都共享一些通用的 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>

标签： vue.jsbootstrap-4vue-componentvue-routerbootstrap-vue

解决方案

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

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

推荐阅读