React 18服务端渲染SCSS文件加载失败，寻求技术解决方案

核心问题分析 #

你的配置存在两个关键错误：

1. 服务端禁用style-loader：style-loader依赖浏览器DOM环境注入样式，Node.js服务端无此环境，直接使用会触发报错。
2. 样式未注入SSR返回的HTML：当前仅通过renderToString生成组件HTML，但组件依赖的SCSS样式未被提取或引入到最终响应的HTML中，导致前端无法加载样式。

具体修复步骤 #

1. 调整Webpack服务端配置 #

替换style-loader，改用css-loader的本地导出模式，适配Node.js环境：

(... imports)

module.exports = {
  entry: './server/index.js',
  target: 'node',
  output: {
    path: path.resolve('server-build'),
    filename: 'index.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'babel-loader'
      },
      {
        test: /\.css$/,
        use: ['css-loader'],
      },
      {
        test: /\.scss$/,
        use: [
          {
            loader: 'css-loader',
            options: {
              modules: {
                exportOnlyLocals: true, // 仅导出样式类名，不生成DOM相关代码
              },
            },
          },
          'sass-loader'
        ],
      }
    ]
  },
  externals: [nodeExternals({ allowlist: /\.(css|scss)$/ })] // 允许Webpack处理SCSS文件
};

2. 服务端HTML注入样式链接 #

假设你已通过客户端Webpack将SCSS编译为独立CSS文件（存于build/static/css），修改server.js在返回的HTML中引入该文件：

(imports...)

app.use('/static/css', express.static(path.resolve(__dirname, '..', 'build', 'static', 'css')));

app.use('/*', (req, res, next) => {
    try {
        fs.readFile(path.resolve('./build/index.html'), 'utf-8', (err, data) => {
            if(err){
                console.log(err)
                return res.status(500).send("Some error happened")
            }
            // 插入CSS链接（替换为你实际编译后的CSS文件名）
            const htmlWithStyles = data
              .replace('</head>', '<link rel="stylesheet" href="/static/css/main.css"></head>')
              .replace(
                  '<div id="root"></div>', 
                  `<div id="root">${renderToString(<App/>)}</div>`
              );
            return res.send(htmlWithStyles);
        })

    } catch (error) {
        console.error(error);
        return res.status(500).send('Internal Server Error');
    }
});

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

3. 额外注意事项 #

• 客户端Webpack需正常处理SCSS：可使用mini-css-extract-plugin生成独立CSS文件，确保服务端能读取到编译后的资源。
• 若使用CSS模块化，服务端与客户端的css-loader配置需保持一致，避免类名不匹配导致样式失效。

内容的提问来源于stack exchange，提问作者Gony