Обмен общим CSS через компоненты VueJS

Я работаю над проектом VueJS 2, и я пытаюсь очистить код, но бороться с облачным стилем.

Вот мои требования. :)

У меня есть 3 компонента, которые очень похожи друг на друга, поэтому я решил использовать mixins для объединения кода в один файл. Каждый компонент будет использовать эти mixins как template и vuejs. Когда я хочу настроить условия для конкретного компонента, я могу просто переопределить код в нем, и он отлично работает в этой части.

Тем не менее, одна вещь, которую я хочу сделать больше, - это перемещение scoped style в миксины. На данный момент стиль обернут <style lang="scss" scoped></style> и этот стиль очень хорошо работает на его компоненте, но я должен дублировать коды стилей во все 3 компонента.

Я знаю, что могу добавить эти стили в глобальный файл css, но я не хочу, чтобы некоторые стили отображались в глобальном масштабе, и только эти 3 компонента будут применяться для них.

Можно ли добавить эти стили и применить к mixins?

Какова наилучшая практика для кодирования этого конкретного случая?

Ответ 1

Я только что обнаружил, что scoped style также влияет на дочерние компоненты.

Поэтому я нашел решение, но не уверен, что это лучшая практика, но я чувствую себя очень хорошо.

Создайте WrapperComponent, и я поместил здесь scoped style и небольшой шаблон.

<template>
    <div>
        <slot></slot>
    </div>
</template>

<style lang="scss" scoped>
    /* css style that will apply to all children */
</style>

Что здесь происходит, так это то, что когда мы обертываем любые компоненты этим WrapperComponent, шаблон передаст HTML через slot без каких-либо изменений, и стиль сможет применяться с этого момента.

В mixins я импортирую эту оболочку и обертываю шаблон компонента с помощью WrapperComponent. Вот пример.

import WrapperComponent from './WrapperComponent'

let MyMixins = {

    template: '<wrapper-component>
        <div>
            Whatever HTML code here
        </div>
    </wrapper-component>',


    components: {
        WrapperComponent,
    },
};

Когда мы используем этот mixins или дочерний компонент, стиль из WrapperComponent будет применяться автоматически, а также может использоваться с другими группами компонентов, которые хотят использовать тот же родительский стиль.

Ответ 2

Возможно, используйте модули вместо настройки раздела style с атрибутом scoped.

https://vue-loader.vuejs.org/en/features/css-modules.html

Таким образом, ваш CSS будет по-прежнему ограничен, а не частью вашего глобального стиля.