Как передать стиль модуля css дочерним компонентам - PullRequest
Новая
       22

Как передать стиль модуля css дочерним компонентам

1 голос
/ 22 января 2020

Прежде чем я начну, мой вопрос о vue и bootstrap, но может быть применен к любому проекту с несколькими пользовательскими интерфейсами, которые имеют общие имена классов.

У меня есть старый проект, который использует bootstrap 2.0.0. Я добавил Vue для новых модулей и хочу использовать bootstrap 4 в них.

Если бы я просто добавил bootstrap 4, большая часть проекта сломалась бы, поэтому мне нужно добавить его только в новые модули, но я столкнулся с некоторыми проблемами. Я много чего перепробовал, но без идеального решения. Вот некоторые из вещей, которые я попробовал:

Scoped CSS: component1. vue

<style lang="scss" scoped>
    @import "~bootstrap/scss/bootstrap"
</style>

Плюсы: Остальная часть приложения не сломается (bootstrap4 применяется только к этому модулю).

Con: Bootstrap 2 также все еще применяется к этому модулю, ломая этот модуль.

Наиболее важный недостаток: каждый модуль vue будет загружаться в целом bootstrap 4. Поэтому, если я сделаю больше vue компонентов в будущем (что я и сделаю), я получу безумные накладные расходы.

CSS Модуль: component1. vue

    <style lang="scss" module>
        @import "~bootstrap/scss/bootstrap"
    </style>

Pro over scoped: Этот модуль не сломается, так как имена классов хэшируются

Con: Тот же мэр con, что и область действия: издержки мэра с несколькими vue компонентами.

То, что я думал, было магическим исправлением c:

компонентов. vue

<template>
<div class="vue-components">
    <component1></component1>
    <component2></component2>
</div>
</template>

<script>
  import component1 from './component1'
  import component2 from './component2'

  export default {
    name: 'components',
    components: {
      component2,
      component1
    }
  }
</script>

<style lang="scss" module>
    @import "~bootstrap/scss/bootstrap";
</style>

Идея в том, чтобы добавить bootstrap как модуль в файле оболочки vue и импортируем в него каждый компонент, так что мы загружаем bootstrap 4 только один раз для каждого vue компонента. Однако дочерние компоненты (component1 и component 2) не получают доступ к стилю. Таким образом, кажется, что импорт исключен из стилей модуля.

Как бы я мог добавить bootstrap только к новым Vue компонентам, не подвергая его старому коду (и также экранируя новые компоненты из старого bootstrap 2)?

...