如何在服务器SSR上呈现的Create React App中添加对Css模块和Sass的支持

在服务器端渲染（SSR）的Create React App中添加对Css模块和Sass的支持，可以按照以下步骤进行操作：

首先，确保你已经创建了一个Create React App项目，并且已经配置好了服务器端渲染。
安装所需的依赖包。在项目根目录下运行以下命令：

npm install node-sass@4.14.1 sass-loader@10.1.1

这将安装最新版本的node-sass和sass-loader包。

在项目的根目录下创建一个名为src的文件夹（如果还没有），然后在该文件夹下创建一个名为styles的文件夹。
在styles文件夹下创建一个名为App.scss的文件，并在其中编写你的Sass代码。例如：

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f0f0f0;
}

.title {
  font-size: 24px;
  color: #333;
}

在你的React组件中引入刚才创建的App.scss文件。例如，在App.js中添加以下代码：

import React from 'react';
import './styles/App.scss';

function App() {
  return (
    <div className="container">
      <h1 className="title">Hello, SSR with Create React App!</h1>
    </div>
  );
}

export default App;

在服务器端渲染的入口文件中，例如server.js，添加对Sass文件的支持。具体操作如下：

首先，安装ignore-styles包，用于忽略CSS样式的导入。在项目根目录下运行以下命令：

npm install ignore-styles

在server.js文件的顶部添加以下代码：

require('ignore-styles');
require('babel-register')({
  ignore: /\/(build|node_modules)\//,
  presets: ['env', 'react-app']
});
require('./src/server');

确保你已经在服务器端安装了node-sass包。如果没有安装，可以运行以下命令进行安装：

npm install node-sass

在服务器端渲染的代码中，例如src/server.js，添加以下代码来处理Sass文件的导入：

import express from 'express';
import React from 'react';
import { renderToString } from 'react-dom/server';
import App from './App';

const app = express();

app.get('/', (req, res) => {
  const appString = renderToString(<App />);
  res.send(`
    <html>
      <head>
        <title>SSR with Create React App</title>
        <link rel="stylesheet" href="/static/css/main.css">
      </head>
      <body>
        <div id="root">${appString}</div>
        <script src="/static/js/main.js"></script>
      </body>
    </html>
  `);
});

app.listen(3000, () => {
  console.log('Server is listening on port 3000');
});

在项目根目录下创建一个名为webpack.server.config.js的文件，并添加以下代码：

const path = require('path');

module.exports = {
  target: 'node',
  entry: './src/server.js',
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'server.js',
    libraryTarget: 'commonjs2'
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      },
      {
        test: /\.scss$/,
        use: [
          {
            loader: 'css-loader',
            options: {
              modules: {
                localIdentName: '[local]__[hash:base64:5]'
              }
            }
          },
          'sass-loader'
        ]
      }
    ]
  }
};

在项目根目录下的package.json文件中添加以下代码：

"scripts": {
  "build:server": "webpack --config webpack.server.config.js",
  "start:server": "node build/server.js",
  "build": "npm run build:server",
  "start": "npm run start:server"
}