Modules React CSS, héritant d'un module css commun

J'ai quelques composants React simples utilisant chacun leur propre module React CSS dans leurs dossiers respectifs. Le CSS est basique mais je l'ai fonctionné. Je construis avec Webpack 2.Modules React CSS, héritant d'un module css commun

Ma question est comment puis-je partager un morceau commun de CSS d'un autre module CSS dans les deux modules React CSS? Je ne suis pas sûr si je devrais avoir un dossier avec juste le module CSS commun là-bas, puis l'importer dans les deux composants React. Si oui, comment puis-je référencer/référencer le CSS commun. J'ai lu les documents, mais je suis toujours confus.

Existe-t-il un moyen similaire à SASS ou Less include/composition? Je comprends que cela peut casser le modèle de composants isolés, mais dans mon cas simple, j'ai un peu de CSS qui fait un bouton avec des bordures légèrement transparentes, et il sera bon de l'avoir commun à tous les composants réagissent. Je suppose que je pourrais placer ce CSS est un fichier .css commun et ont bundle Webpack, puis il suffit d'utiliser comme className = {....}

Source

2017-05-10 Rory

essayez d'utiliser [CommonsChunkPlugin] (http://webpack.github.io/docs/list-of-plugins.html#commonschunkplugin). Aidez moi. – arcsin1

Je suppose que je pourrais placer ce CSS est une commune Css fichier et bundle Webpack, puis il suffit d'utiliser comme className = {....}

vous êtes vrai, parce que vous êtes en train de construire une application d'une seule page, ce qui signifie que tout sera bien ensemble , après il y a juste HTML, CSS et javascript. Vous pouvez déclarer vos styles CSS comme d'habitude, puis définissez une className ou id dans votre render

Source

2017-05-10 11:16:57 thinhvo0108

Oui, cela semble la solution «simple» – Rory

Qui serait vaincre le point entier des modules CSS, ne répond pas à la question – alechill

@alechill J'ai déjà répondu et a été accepté, si vous lisez attentivement, vous verrez que je suis d'accord avec la suggestion de l'auteur, qui est une réponse, puis j'ai également suggéré sur la façon d'utiliser de cette façon en utilisant "className" et "id". Je voudrais savoir pourquoi vous avez un sentiment comme ça, merci! Si vous pensez que ma réponse n'est pas correcte, vous pouvez commenter ou fournir un meilleur, en disant "ne répond pas à la question" en quelque sorte n'est pas un bon point ^^ – thinhvo0108

La bonne façon de le faire compte tenu de votre configuration, serait d'utiliser la fonction composes des modules CSS

Cela vous permet de définir une règle de classe localisée, et l'importer dans d'autres règles de classe localisées, même à travers les fichiers

MyCommonStyles.css

/* base button styles */ 
.button { 
    background: #000; 
    color: #fff; 
}

MyModule1.css

/* use base button styles and override the color */ 
.loginButton { 
    composes: button from './MyCommonStyles.css'; 
    color: #00ff00; 
}

Je comprends cela peut briser le modèle des composants isolés

Dans les modules CSS terre il n'y a rien de mal avec des extraits de partage de code entre les modules - loin de là, Ceci est construit dans et serait très contre-productif de prescrire recréer les mêmes styles encore et encore - tant qu'il n'est pas fait en utilisant CSS global

Pour ce que sa valeur, la même chose peut être atteint dans un fferent façon en utilisant les propriétés personnalisées CSS proposées @apply, que vous pouvez utiliser aujourd'hui via postcss (https://github.com/postcss/postcss-custom-properties). L'une ou l'autre approche est tout à fait correcte, mais je vous encourage à essayer cela en même temps, pour créer des vars communs ou des extraits qui peuvent être partagés entre les modules CSS. C'est un excellent moyen de créer des composants avec un thème standard encore en utilisant purement localisé CSS

Source

2017-05-15 14:28:05 alechill

Modules React CSS, héritant d'un module css commun

Répondre

Questions connexes