Ich verwende Webpack , um meine Module zu bündeln und sass in einer reaktionsabhängigen Anwendung zu verwenden.
Mit einem separaten Stylesheet setze ich das Hintergrundbild einer Komponente und lade dieses Stylesheet in index.js . Alle Stile in Stylesheets werden auf diese Komponente angewendet außer Hintergrundbild .
Hier ist mein Beispiel-Stylesheet
%Vor%Eine Möglichkeit, dieses Problem zu lösen, wäre, das Bild explizit zu erstellen und dann einen Inline-Stil für die react-Komponenten zu erstellen.
%Vor%Aber ich möchte alle Bilder aus meinem Bilderordner laden, sobald mein Stylesheet geladen ist und nicht jedes Bild einzeln erfordert.
Meine Webpack-Konfigurationsdatei ist
%Vor%Ich vermisse vielleicht einige triviale Punkte. Jede Hilfe wird geschätzt.
Ahh .... Nach vielen Stunden Debugging habe ich endlich das Problem gefunden. Es war meine Torheit, wegen der ich kämpfte. Ich wollte diese Frage löschen, dachte aber, dass es Neulingen wie mir helfen würde, wenn sie an ähnlichen Problemen festhalten.
Problem war hier
loader: 'url-loader?limit=10000'
Ich habe das Limit für die Dateigröße von 10kb festgelegt, ohne wirklich zu wissen, was es tut. Und das Bild, das ich geladen habe, hatte eine Größe von <21kb ! Dies passiert, wenn Sie einige andere Webpack-Konfigurationsdateien kopieren :) Zeichen der Ermüdung von JavaScript!
Wenn Sie das webpack zum Laden Ihrer CSS und der Assets verwenden, auf die sie zugreifen, muss Ihre CSS den gleichen Modulbenennungsregeln folgen, die Sie in Ihren JavaScript import - oder require -Aufrufen verwenden.
Angenommen, der Ordner img befindet sich im Stammverzeichnis Ihres Quellbaums, sollten Sie in scss:
Oder geh einfach ganz relativ. Angenommen, Ihr Quellcode ist wie folgt:
%Vor% Ihr styles.scss könnte einen relativen Pfad verwenden:
Tags und Links javascript css reactjs webpack webpack-style-loader