это дерево проекта. Как видите, файл CSS находится рядом с вызываемым файлом, поэтому я предположил, что файл CSS внутри части HTML сервера должен быть вставлен извне, как и я. Однако это не работает. У кого-нибудь есть предложения? | - проект | - .babelrc | - пакет-блокировка. json | - пакет. json | - webpack.config. js | - src | - действия
|-- components
| |-- entrypoints
| |
| |-- pages
|
|-- routes
|
|-- index.js
|--style.css
и это мой индекс. js:
import axios from "axios";
import "@babel/polyfill/noConflict";
import express from "express";
import proxy from "express-http-proxy";
// import compression from "compression";
import bodyparser from "body-parser";
import React from "react";
import { renderToString } from "react-dom/server";
import { StaticRouter } from "react-router-dom";
import { createStore, applyMiddleware } from "redux";
import thunk from "redux-thunk";
import { Provider } from "react-redux";
import { renderRoutes, matchRoutes } from "react-router-config";
import reducers from "./client/reducers";
import Routes from "./client/Routes";
import serialize from "serialize-javascript";
// Server var
const app = express();
// View engine setup
// app.set("views",'src/views/pages');
// app.set("view engine", "ejs");
// console.log("views");
// Middleware
// app.use(compression());
app.use(
"/api",
proxy("http://react-ssr-api.herokuapp.com", {
proxyReqOptDecorator(opts) {
opts.headers["x-forwarded-host"] = "localhost:3000";
return opts;
},
})
);
app.use(express.static("public"));
app.use(bodyparser.urlencoded({ extended: false }));
app.get("*", (req, res, next) => {
const axiosInstance = axios.create({
baseURL: "http://react-ssr-api.herokuapp.com",
headers: { cookie: req.get("cookie") || "" },
});
const store = createStore(
reducers,
{},
applyMiddleware(thunk.withExtraArgument(axiosInstance))
);
// console.log(matchRoutes(Routes, req.path),">>>>>>>")
const promises = matchRoutes(Routes, req.path).map(({ route }) => {
return route.recipesData ? route.recipesData(store) : null;
});
// console.log(promises)
Promise.all(promises).then((result) => {
// console.log(result,"result")
const home = renderToString(
<Provider store={store}>
<StaticRouter context={{}} location={req.path}>
<div>{renderRoutes(Routes)}</div>
</StaticRouter>
</Provider>
);
res.send(`
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://fonts.googleapis.com/css?family=Righteous&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600;700&display=swap" rel="stylesheet">
<link href="style.css" rel="stylesheet.css" type="text/css">
<link rel="shortcut icon" href="#"/>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<title>server</title>
<style>
.header {
font-family: "Oswald", sans-serif;
background-color: violet;
height:10vh;
weight:100vw;
}
</style>
</head>
<body>
<div id="root">${home}</div>
<script>window.INITIAL_STATE=${serialize(store.getState())}</script>
<script src="bundle.js" charset="utf-8"></script>
</body>
</html>
`);
});
// res.status(200).render("index",{
// reactApp:home,
// path:'/'
// })
});
app.listen("3000", () => {
console.log("connected to 3000");
});
но по какой-то причине стиль. css не привлекает внимания. Я не уверен, где проблема: