mit Css-Modulen, wie kann ich Klassen aus einer Datei importieren

Question

Ich verwende CSS-Module für mein Projekt, und ich habe eine Datei positioning.css, die einige nützliche Klassen enthält, die ich importieren möchte. z.B. .right,.left

Was ist der beste Ansatz für die Verwendung von CSS-Modulen?

Im Moment kann ich 2 Möglichkeiten sehen, aber sie sind alle nicht so toll:

Zusammensetzung im Stil der Komponente

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

oder

mehr CSS-Modul Importe in die Komponente

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

Ich werde mit dem ersten Vorschlag gehen. (Das Ergebnis ruhig ist das gleiche)

• beide Satz ruhig haben das gleiche Ergebnis
• Wenn eines Tages müssen Sie Ihr Menü CSS bearbeiten, müssen Sie nur Ihr Menü CSS bearbeiten müssen und nicht Ihre Komponente.
• Sie lassen CSSModule Entscheidungen treffen. (Mehr futur Beweis?)

Answer 2

Sie die CSS-Dateien importieren können, die Sie häufig verwenden, um in eine breitere CSS-Datei, die Sie auf bestimmten Seiten zu importieren, ist dies den zweiten Ansatz, aber es sauberer zu machen, vor allem, wenn Sie eine haben Viele gängige Core CSS-Dateien, die Sie auf fast allen Seiten importieren.

Answer 3

Ich würde Ihnen raten, mit [Sass] [1] zu gehen. Sass ermöglicht die Verwendung von Teiltönen (d. H. Verteilte/begrenzte css-Blätter).

Sie schreiben scoped (zu den Komponenten, die Sie wollen) css und importieren Sie alle Ihre Partials in Ihre main.css dann.

Paar weiterer Vorteile:

1. Sie können durch Thematisierung tun mit einer partiellen, die Ihre ihnen über Variablen definiert, die Sie zuerst importieren und dann alle Ihre partials diese Variablen verwenden können.
2. mit der css auf einem begrenzten Niveau (zumindest für mich) fühlte sich mehr "reactis" wo Komponenten sollen stand alone, aber es war auch nicht Inline - Styling, die ich hässlich und seltsam finde (ich nicht mag meine Js Dateien mit Stilen Krempel nach unten)

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

Answer 4

1. Sie shuold von vue.js Komponente einen Blick auf die Option überprüfen (scoped/insgesamt)

2. Sie kann eine vorkompilierte CSS-Sprache wie SASS wählen, die @Extend verwenden kann.etc die gemeinsame Eigenschaft, wie unten wieder zu verwenden:

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

Answer 5

ich diese eine Zeile sehr hilfreich mit dem Import:

@import 'file.css'; 

Answer 6

Sie könnten diese als globals gesetzt und ihre Namen aktualisieren a zu sein etwas semantischer, wie BootStraps pull-right.

Wenn Sie sie als

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

erklären können Sie dann durch vorzugsweise importieren Globals in Ihrer App verwenden sie nur früh im Einstiegspunkt.

Answer 7

Ein Ansatz ist es, alle App-Ebene CSS-Variablen und Berechnungen auf der obersten Ebene in app.css

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

Dann app.css

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

Sie verwalten können auf diese Weise mit Referenz zu sammeln @ Importieren Sie den Bereich innerhalb einer Datei auf der Stammebene.