Question

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

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

Answer 1

确保您的自定义CSS具有正确的特性来定位元素。

Answer 2

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

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

Bootstrap样式优先于自定义CSS

2 个答案: