web-dev-qa-db-fra.com

Partage de CSS commun entre les composants VueJS

Je travaille sur le projet VueJS 2 et j'essaie de nettoyer le code, mais je ne parviens pas à obtenir un style limité.

Voici mes exigences. :)

J'ai 3 composants qui sont très similaires les uns aux autres, alors j'ai décidé d'utiliser mixins pour fusionner le code dans un fichier. Chaque composant utilisera cette mixins de template et vuejs. Lorsque je veux personnaliser les conditions d'un composant particulier, je peux simplement remplacer le code qu'il contient et cela fonctionne correctement dans cette partie.

Cependant, une chose que je veux faire plus est de déplacer également le scoped style vers les mixins. Pour le moment, le style est enveloppé dans la balise <style lang="scss" scoped></style> et ce style fonctionne très bien sur son composant, mais je dois dupliquer les codes de style dans les 3 composants.

Je sais que je peux ajouter ces styles au fichier css global, mais je ne veux pas que certains styles fassent partie de la portée globale, un seul de ces 3 composants s'appliquera à ceux-ci.

Est-ce une façon d'ajouter ces styles et de les appliquer à mixins?

Quelle est la meilleure pratique pour coder ce cas particulier?

cssvue.jsscopevuejs2mixins
6
spicydog

Je viens de découvrir que le scoped style affecte également les composants enfants.

Par conséquent, j'ai trouvé la solution, je ne suis pas sûr que ce soit la meilleure pratique, mais je me sens très bien pour cela.

Créez une WrapperComponent et je mets le scoped style ici et un petit modèle.

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

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

Ce qui arrive ici, c’est que, lorsque nous encapsulons les composants avec cette WrapperComponent, le modèle passera le code HTML via slot sans aucune modification et le style pourra désormais s’appliquer.

Dans mixins, j'importe ce wrapper et j'emballe le modèle de composant avec le WrapperComponent. Voici l'exemple.

import WrapperComponent from './WrapperComponent'

let MyMixins = {

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


    components: {
        WrapperComponent,
    },
};

Lorsque nous utilisons cette mixins ou un composant enfant, le style de WrapperComponent sera automatiquement appliqué et pourra également être utilisé avec d'autres groupes de composants qui voudront utiliser le même style parent.

2
spicydog

Utilisez peut-être des modules au lieu de configurer une section style avec un attribut scoped.

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

De cette façon, votre CSS sera toujours étendu et ne fera pas partie de votre style global.

0
Stephan-v