diesewie für mit CSS Importe umgehen reagieren serverseitige
-Importing CSS files in Isomorphic React Components ziemlich ähnlich ist, aber die vorgeschlagene Lösung eine bedingte Anweisung vorgeschlagen, die prüft, ob der Import vom Server oder Browser erfolgt. Das Problem ist, dass ich das Importobjekt in der Komponente selbst verwenden, wie unten
<a href="/auth/github" className={style.link}>Sign up with github </a>
aber style ist nicht definiert, weil ich es auf dem Server nicht importieren. Die andere Methode schlug webpack-isomorphic-tools vor, die erfordern, dass ich den serverseitigen Code als auch bündeln. Dieser Ansatz zwingt Sie auch, das Webpack auf der Serverseite zu verwenden, auf die ich nicht scharf bin.
im Grunde ist meine Komponente
import React from 'react';
import SignUp from './SignUp'
import {Link} from 'react-router'
import {connect} from 'react-redux';
import Modal from 'react-modal'
import style from './app.css'
class App extends React.Component{
componentDidMount(){
console.log('mounted')
}
render(){
return (
<div>
<p> Hello Kj</p>
<a href="/auth/github" className={style.link}>Sign up with github </a>
<a href="/logout" className={style.logout}> Logout </a>
<Link to ='/project'>Project</Link>
<button onClick={this.openModal}> Login </button>
<h1> {this.props.username} </h1>
<h2> {this.props.email} </h2>
<div> {this.props.children} </div>
</div>
)
}
}
von der Serverseite Rendering führt der Fehler
[Error] SyntaxError: /home/avernus/Desktop/projects/node-sc-react/client/app.css: Unexpected token (1:0)
> 1 | .link{
|^
2 | text-decoration: none;
3 | border: 1px solid black;
4 | background-color: blue;
at Parser.pp.raise (/home/avernus/Desktop/projects/node-sc-react/node_modules/babylon/lib/parser/location.js:22:13)
at Parser.pp.unexpected (/home/avernus/Desktop/projects/node-sc-react/node_modules/babylon/lib/parser/util.js:89:8)
at Parser.pp.parseExprAtom (/home/avernus/Desktop/projects/node-sc-react/node_modules/babylon/lib/parser/expression.js:522:12)
at Parser.parseExprAtom (/home/avernus/Desktop/projects/node-sc-react/node_modules/babylon/lib/plugins/jsx/index.js:18:22)
at Parser.pp.parseExprSubscripts (/home/avernus/Desktop/projects/node-sc-react/node_modules/babylon/lib/parser/expression.js:277:19)
at Parser.pp.parseMaybeUnary (/home/avernus/Desktop/projects/node-sc-react/node_modules/babylon/lib/parser/expression.js:257:19)
at Parser.pp.parseExprOps (/home/avernus/Desktop/projects/node-sc-react/node_modules/babylon/lib/parser/expression.js:188:19)
at Parser.pp.parseMaybeConditional (/home/avernus/Desktop/projects/node-sc-react/node_modules/babylon/lib/parser/expression.js:165:19)
at Parser.pp.parseMaybeAssign (/home/avernus/Desktop/projects/node-sc-react/node_modules/babylon/lib/parser/expression.js:128:19)
at Parser.parseMaybeAssign (/home/avernus/Desktop/projects/node-sc-react/node_modules/babylon/lib/plugins/flow.js:460:20)
ist es trotzdem, ich mit diesem Problem umgehen kann, ohne webpack zu verwenden?
arbeitet mit out Sie könnten versuchen, die webpack zu verwenden Extrakt-Text-webpack -plugin beim Bündeln für den Client, und verweisen Sie dann nur auf die extrahierte Datei auf dem Server. –
@DavinTryon - ich benutze tatsächlich extract-text-webpack und bündelte die CSS-Dateien in einen Ordner, der Hosts ausdrückt. aber ich denke das Problem ist, wenn der Server die Komponente rendert, die eine Abhängigkeit von app.css hat, - babel wirft den Fehler, weil es css nicht parsen kann. – Kannaj
ich benutze loader für 'css-modules' wie soll man ohne webpack und loader am backend arbeiten? Lass die Idee von 'css-modules' einfach fallen oder akzeptiere die Bündelung mit webpack im Backend - es ist nicht so schlimm. – Everettss