Kein Laden / Servieren von Stylesheets - reagieren
Ich versuche SSR mit Reactor-Router StaticRouter .
express.js (Server)
%Vor%Bereitstellung von statischen Dateien:
%Vor%App.js (freigegeben)
%Vor%index.jsx (Client)
%Vor%./ styles / Main.scss
%Vor%Ich habe 2 Webpack-Konfigurationen, 1 für den Client & amp; 1 für den Server:
webpack.config.dev.js
%Vor%webpack.config.server.js
%Vor% Ich habe eine JSX-Datei, auf die .header angewendet werden soll:
Dies wirft den Fehler:
%Vor%Beim Ausführen der Anwendung meldet webpack, dass das Stylesheet geladen wurde:
BEARBEITEN
Abgesehen von einem ES6-Import habe ich versucht, CommonJS ' require() wie in MERN aber immer noch nicht ...
Wenn ich meine Server-Webpack-Konfiguration erstelle, bekomme ich jetzt den Fehler:
%Vor%Ich bin mir nicht sicher, ob dies ein Red-Hering oder nicht in dieser Situation oder nicht, aber ich denke, es ist erwähnenswert, da ich ziemlich verloren bin. Fühle mich, als ob ich an diesem Punkt an Strohhalmen klammere.
Das ist mein .babelrc :
Ich habe versucht, zu den Grundlagen zurückzukehren und meinen Babel Server-seitige Bündelung anstelle von Webpack behandeln lassen. Dies wurde aus einem Tutorial für SSR mit CSS-Modulen, die ich freundlicherweise verlinkt hatte, erstellt um @ Mootrichard
BEARBEITEN 2
Ein paar Beobachtungen, die helfen könnten ... wenn Sie einen es6 Import für Stylesheets verwenden:
%Vor% und log styles in die Konsole, es gibt undefined zurück (Beweis dafür, dass die Datei aus irgendeinem Grund nicht gefunden werden kann) .
Wenn das <link> -Tag in das head für die erste Seite eingefügt wird, ist das <link> -Tag im Markup vorhanden, aber nicht im Netzwerk:
Beim Navigieren zu localhost:8000/app.css wird jedoch eine positive Antwort mit dem Styling zurückgegeben:
Wenn der Browser die gebündelte Version eigenständig finden kann, warum wird er nicht auf meiner Startseite geladen? (Der Pfad ist korrekt)
2 Antworten
Ich glaube, Sie haben einen Fehler in Ihrer Jock-Hierarchie webpack.config für Ihre css / sass Loader. Ersetzen Sie Ihr "loaders" -Array unter Modul durch dieses "rules" -Array:
%Vor%Sie können weitere Beispiele für die Verwendung von ExtractTextPlugin hier sehen: Ссылка
Sie haben Probleme, weil Sie css-loader/locals verwenden, aber nicht ExtractTextPlugin (zumindest in Entwicklung).
Ссылка
Hinweis: Zum Vorrendering mit extract-text-webpack-plugin sollten Sie css-loader / locals anstelle von style-loader! css-loader im prerendering bundle verwenden. CSS wird nicht eingebettet, sondern exportiert nur die Bezeichnerzuordnungen.
Dies erklärt auch, warum Sie nicht auf die Style-Variable .theHeader zugreifen können.
Auch der Fehler Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost:3000/app.css". ist ein Ablenkungsmanöver. Das ist einfach die Fehlermeldung, die Sie erhalten, wenn Sie versuchen, ein Stylesheet zu laden, das nicht einmal existiert. Das scheint in diesem Fall nicht in dem Verzeichnis zu sein, von dem Sie denken, dass es es ist, oder es wird dort nicht in einer Datei erzeugt.
Da ExtractTextPlugin in der Entwicklung deaktiviert ist, ist es wahrscheinlich, dass Ihr CSS nur von css-loader/locals verarbeitet wird. Dies ist möglicherweise kein Problem in der Produktion, da es mit ExtractTextPlugin gepaart ist, aber könnte Ihre Probleme bei der Ausführung in der Entwicklung erklären.
Aktualisierung:
Als ich ein wenig mehr darüber nachdachte, stieß ich auf einen Blogpost, der Ihnen vielleicht dabei helfen würde, herauszufinden, wie Sie CSS so konfigurieren, dass es so funktioniert, wie Sie es wollen. Ссылка
Ich denke, der Hauptgrund für die Komplikation hier ist, dass Sie den HTML-Code als gerenderten String über ReactDOMServer senden. Es gibt also keinen Ort, an dem das Webpack ein <link> -Tag einfügen kann. Sie sollten in Erwägung ziehen, nur ein <link> -Tag in Ihrer Kopfzeile zu haben, um auf Ihre gewünschte CSS-Datei zu verweisen, da webpack sowieso eine einzige CSS-Datei erstellt.
Schließlich empfehle ich dringend, ein wenig mehr über das Webpack zu lernen, vor allem, weil SSR ein neuerer Prozess ist und etwas anders ausgeführt werden muss, als viele ursprünglich erwartet hatten, als das Webpack zum ersten Mal erstellt wurde.
Tags und Links javascript reactjs webpack