en utilisant des modules css, comment puis-je importer des classes à partir d'un fichier

Question

J'utilise des modules css pour mon projet, et j'ai un fichier positionnement.css qui a quelques classes utiles que je veux importer. par exemple. .right,.left

Quelle est la meilleure approche pour cela en utilisant des modules CSS?

Actuellement, je vois 2 options, mais ils ne sont pas tout ce grand:

composition dans le style

.right { 
    composes: right from '../styles/positioning.css'; 
} 

ou

multiples module CSS du composant les importations dans le composant

import positioning from '../styles/positioning.css' 
import styles from './myComponent.css'; 
Object.assign(styles, positioning) 

class Menu extends Component { 

    render() { 

    return (
     <div styleName='menu'> 
     <div styleName='left'>this is left</div> 
     <div styleName='right'>this is right</div> 
     </div> 
    ); 
    } 
}; 

export default CSSModules(Menu, styles); 

Answer 1

Je vais aller avec la première proposition. (Le résultat est calme même)

• deux propositions ont calme le même résultat
• Si un jour vous devez modifier votre menu css, vous aurez juste à modifier votre menu et non css votre composant.
• Vous laissez CSSModules prendre des décisions. (plus de preuve future?)

Answer 2

Vous pouvez importer les fichiers CSS que vous utilisez fréquemment dans un fichier CSS plus large que vous importez sur des pages spécifiques, ceci prend la deuxième approche, mais en le rendant plus propre, surtout si vous avez un beaucoup de fichiers communs de css de base que vous importez sur à peu près toutes les pages.

Answer 3

Je vous conseille d'aller avec [Sass] [1]. Sass permet l'utilisation de partiels (c'est-à-dire des feuilles CSS distribuées/étendues).

Vous écrivez scoped (aux composants que vous voulez) css et importez tous vos partiels dans votre main.css alors.

Couple d'autres avantages:

1. vous pouvez le faire en ayant une thématisation partielle qui définit vos via les variables que vous importez d'abord, puis tous vos partials pouvez utiliser ces variables. Avoir le css sur un niveau de portée (au moins pour moi) se sentait plus "réagir" là où les composants sont supposés être autonomes, mais ce n'était pas non plus un style en ligne, que je trouve laid et bizarre (je ne sais pas vous encombrer le long de mes fichiers .js avec des styles)

[1] http://sass-lang.com/

Answer 4

1. Vous shuold vérifier un regard sur l'option par composant vue.js (scope/global)

2. Vous peut choisir un langage précompile CSS comme SASS, qui peut utiliser @extend ..etc à réutiliser la propriété commune, comme ci-dessous:

   %common { 
       width: 100%; 
       height: inherit; 
   } 
   
   .my-class { 
       @extend %common; 
   } 
   

Answer 5

Je trouve cela une ligne très utile avec l'importation:

@import 'file.css'; 

Answer 6

Vous pouvez définir ces derniers comme globals et mettre à jour leurs noms à une un peu plus sémantique, comme BootStraps pull-right.

Si vous les déclarez comme

:global(.right) { 
    /* ... */ 
} 

Vous pouvez simplement les utiliser dans votre application par GLOBALS préférence importation dès le début du point d'entrée.

Answer 7

Une approche consiste à recueillir tous les niveaux d'application variables et calculs css au niveau supérieur en app.css

@import "./theme/layout.css"; 
@import "./theme/colors.css"; 
... 

la référence Puis app.css en utilisant

@import "../../app.css"; 

De cette façon, vous pouvez gérer @ importer la portée dans un fichier au niveau racine.