bounty将在3天后过期。回答此问题可获得+50声望奖励。nick2225希望吸引更多人关注此问题。

我正在尝试构建一个同构的React应用程序，但现在我将把我的问题限制在服务器端呈现部分。我想在我的应用程序的服务器端呈现一些React JS组件。我可以通过方法ReactDomServer.renderToString来实现。但是我无法获得CSS（或我的SASS/SCSS文件）来处理这些组件。
对于客户端，我通常可以使用Webpack和css-loader/style-loader，当我捆绑JS时，组件的样式会正确。但是，我不知道如何在服务器端这样做。这是我在服务器文件上运行ts-node时遇到的错误

body {
     ^

SyntaxError: Unexpected token '{'
    at Object.compileFunction (node:vm:360:18)
    at wrapSafe (node:internal/modules/cjs/loader:1088:15)
    at Module._compile (node:internal/modules/cjs/loader:1123:27)
...

以下是我的相关文件。

源代码/组件/应用程序.tsx

import React from "react";
import "./App.scss"

class App extends React.Component {
    override render(): React.ReactNode {
        return (<div>THIS IS THE APP START</div>);
    }
}

export default App;

源代码/组件/应用程序.scss

$mycolor: red;

body {
    color: $mycolor;
}

源代码/服务器.tsx

import express from "express";
import ReactDomServer from "react-dom/server";
import App from "./Components/App";

const app = express()
const port = 3000

app.get('/', (req, res) => {
  const html = ReactDomServer.renderToString(<App />);
  res.send(html);
});

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
});

tsconfig.json文件名

{
    "include": ["src/**/*"],
    "exclude": ["node_modules"],
    "compilerOptions": {
        "esModuleInterop": true,
        "moduleResolution": "Node16",
        "jsx": "react-jsx"
    }
}

包. json

{
  "name": "really",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "start": "ts-node src/server.tsx"
  },
  "dependencies": {
    "@types/node-sass": "^4.11.3",
    "@types/react": "^18.0.25",
    "@types/react-dom": "^18.0.9",
    "express": "^4.18.2",
    "node-sass": "^8.0.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "sass": "^1.56.1",
    "ts-node": "^10.9.1"
  },
  "devDependencies": {
    "typescript": "^4.9.3"
  }
}

不确定是否有可能在express服务组件之前加载CSS。另一种可能的方法是使用webpack捆绑服务器端文件并加载CSS，但我不知道这是否有效，而且我觉得服务器端的部分很奇怪。有没有一种方法可以在没有webpack的情况下做到这一点？