Bootstrap样式优先于自定义CSS

Question

我有一个vue-2项目，该项目使用(应该是相关的(vue-router，webpack和bootstrap-vue。我在应用程序的根部加载Bootstrap，因为它已在我的应用程序上全球使用。在应用程序中，我将视图分为内部和外部路线，并具有单个页面的子路由。我所有的外部路线都共享一些常见的CSS样式，因此我在外部路线的底部加载"外部.css"，以避免重新定义每个组件中的相同CSS。

我遇到的问题是，Bootstrap的CSS规则优先于我的自定义CSS规则当我从'external.css'中拉出样式时这些类是在每个组件中本地定义的。这不是范围范围造型的问题，因为这些规则已应用于组件，就在层次结构中的较早情况下，因此它们被Bootstrap的规则所覆盖。

我的理解是，由于我的" external.css"文件在应用程序的层次结构中进一步包括在内，因此应将其样式应用于第二(就像我在使用HTML Imports和Bootstrap-vue一样关于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/>"
});

和我的外部。VUE组件：

<script>
export default {
  name: "External"
};
</script>
<style>
@import "../../assets/css/external_styles.css";
</style>

Answer 1

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

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

Answer 2

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