Стили начальной загрузки, имеющие приоритет над пользовательским CSS - PullRequest
Новая
       30

Стили начальной загрузки, имеющие приоритет над пользовательским CSS

0 голосов
/ 03 мая 2019

У меня есть проект Vue-2, который использует (из того, что должно быть актуально) Vue-Router, Webpack и Bootstrap-Vue. Я загружаю в Bootstrap в корне моего приложения, так как оно используется в моем приложении. В приложении я делю свои взгляды на внутренние и внешние маршруты с под-маршрутами для отдельных страниц. Все мои внешние маршруты имеют общий стиль CSS, поэтому я загружаю «external.css» в базу моих внешних маршрутов, чтобы избежать переопределения одного и того же CSS в каждом компоненте.

Проблема, с которой я столкнулся, заключается в том, что правила CSS Bootstrap имеют приоритет над моими пользовательскими правилами 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 Ответ

0 голосов
/ 14 мая 2019

Убедитесь, что ваш пользовательский CSS имеет правильную специфику для элементов.

...