reactjs - 用于服务器端渲染的 create-react-app

Question

我正在使用 create-react-app使用 react-routes 构建我的第一个 React 应用程序的工具现在我想使用服务器端渲染来避免一次加载所有页面。

我按照指南安装了 express.js，使用 .js 文件将客户端和服务器端分开并运行它

NODE_ENV=production babel-node --presets 'react,es2015' src/server.js

但是当应用程序尝试编译 sass @import 语句时出现错误。我想我必须先提供 Assets ，但我不知道如何在 server.js 逻辑中插入 webpack 函数

create-react-app 也有 npm run build用于生产构建和创建 js 和 css 文件的命令，所以也许有一些方法可以在编译 server.js 时跳过 Assets 部分？

Server.js 文件内容

import path from 'path';
import { Server } from 'http';
import Express from 'express';
import React from 'react';
import { renderToString } from 'react-dom/server';
import { match, RouterContext } from 'react-router';
import routes from './routes';
import NoMatch from './pages/NoMatch';

// initialize the server and configure support for ejs templates
const app = new Express();
const server = new Server(app);
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'));

// define the folder that will be used for static assets
app.use(Express.static(path.join(__dirname, 'static')));

// universal routing and rendering
app.get('*', (req, res) => {
  match(
    { routes, location: req.url },
    (err, redirectLocation, renderProps) => {

      // in case of error display the error message
      if (err) {
        return res.status(500).send(err.message);
      }

      // in case of redirect propagate the redirect to the browser
      if (redirectLocation) {
        return res.redirect(302, redirectLocation.pathname + redirectLocation.search);
      }

      // generate the React markup for the current route
      let markup;
      if (renderProps) {
        // if the current route matched we have renderProps
        markup = renderToString(<RouterContext {...renderProps}/>);
      } else {
        // otherwise we can render a 404 page
        markup = renderToString(<NoMatch/>);
        res.status(404);
      }

      // render the index template with the embedded React markup
      return res.render('index', { markup });
    }
  );
});

// start the server
const port = process.env.PORT || 3000;
const env = process.env.NODE_ENV || 'production';
server.listen(port, err => {
  if (err) {
    return console.error(err);
  }
  console.info(`Server running on http://localhost:${port} [${env}]`);
});

Answer 1

尝试安装 node-sass并遵循官方指南
https://create-react-app.dev/docs/adding-a-sass-stylesheet/