laden verschiedene CSS auf verschiedenen Seiten

Question

Ich versuche, eine Lösung für dieses Problem zu finden:

Ich bin enthält auf Seite, ex eine Vorlage mit verschiedenen mit CSS basiert:

Login uses login.css 
Home uses home.css 

Wenn ich lade beide css die Login-Seite ist kaputt, weil Styles von home.css überschrieben werden Also muss ich login.css laden oder benötigen, wenn die Route oder die Komponente Login ist und die andere, wenn Home ist.

Wenn ich beide webpack laden eine globale CSS mit beiden Dateien erstellt, und alles, was kaputt ist ...

Ich habe versucht, die CSS in componentDidMount zu verlangen, aber ich denke, dass ist nicht der Weg :)

Vielen Dank im Voraus

Answer 1

Es klingt wie diese beiden Stile sind ziemlich spezifisch für die Seiten, also warum nicht einfach Namespace sie?

Innerhalb Ihrer Vorlagen eine .login/.home-Klasse verwenden und diese als Namespace innerhalb des CSS verwenden. Wenn Sie Sass verwenden, ist dies so einfach wie das Umhüllen aller Sass in der Klasse. Andernfalls können Sie die Klasse am Anfang aller Elemente/Klassen durchlaufen und hinzufügen.

Answer 2

Dies ist ein allgemeinerer Ansatz zum Kombinieren von CSS-Dateien, ohne von Technologien wie SASS oder reactjs abhängig zu sein.

Ich nehme an, wenn Sie die zwei CSS-Dateien kombinieren, verwenden Sie Grunt oder ähnliches Tool, um diese Aufgabe zu automatisieren. Das automatische Aktualisieren der CSS-Dateien sollte daher für Sie in Ordnung sein, auch wenn sie aus einer externen Quelle stammen und Sie aktualisierte Versionen verwenden möchten, ohne manuelle Änderungen vorzunehmen.

Ich nehme auch an, dass Sie Klassen verwenden, um Ihre Seiten zu stylen, also gibt es keine Tag-basierten Stile in Ihrem CSS. Weil Sie die Tags in der CSS-Datei nicht umbenennen können, ohne sie zu bremsen oder größere Änderungen an Ihrem Code vorzunehmen.

Wenn meine Annahmen wahr sind, könnten Sie etwas wie Grunt-CSS-Präfix verwenden. Es kann Präfixe zu Ihren CSS-Klassen für die Anmeldeseite hinzufügen, wie in diesem Snippet.

Original-CSS-Datei Inhalt:

.foo, 
.bar, 
h1 { 
    display: none; 
} 

CSS Dateiinhalt nach der Grunt Skript ausgeführt wird:

.login-foo, 
.login-bar, 
h1 { 
    display: none; 
} 

einfach die login-foo wie Klassennamen verwenden, in Ihrem Login-HTML und Sie sind gut zu gehen .

Weitere Informationen zur Verwendung von grunt-css-Präfix finden Sie unter https://www.npmjs.com/package/grunt-css-prefix.

Answer 3

Zunächst sollten Sie keine Probleme haben, wenn Sie verschiedene CSS-Klassen für Ihre Ansichten verwenden und nur die Elemente basierend auf diesen Klassen stylen.

Der beste Weg, CSS zu laden in reagieren ist es von Komponenten zu tun, wenn Sie eine Komponente bekommen login.jsx, in Ihrem Ordner styles (oder was auch immer Ordner, den Sie verwenden Ihre Stile zu halten) erstellen sass teilweise _login.scss und fügen Sie die css-Selektoren und Stile für die angegebene Komponente hinzu, und zwar für jede Komponente in Ihrer reaktiven Anwendung.

Dann fügen Sie diese Teiltöne einfach in eine main.scss-Datei ein und das ist die Datei, die Sie in Ihre react-App laden wollen.

Hier ist ein Beispiel für eine main.scss-Datei mit einigen Sass-Teiltönen.

@import 'base/variables'; 
@import 'base/defaults'; 
@import 'components/login'; 
@import 'components/home'; 

, dass eine gute und saubere Art und Weise ist mit Stilen zu arbeiten reagieren, natürlich müssen Sie Ihren webpack konfigurieren, um sass zu erhalten in Ihrer Anwendung zu arbeiten.

Werfen Sie einen Blick auf this und this für weitere Informationen.