React SSR（StaticRouter）样式表无法加载/服务问题求助

看起来你在React SSR的样式处理上踩了个常见的坑——服务端和客户端的样式运行环境完全不同，服务端没法像浏览器那样直接解析和注入CSS，所以哪怕Webpack提示样式加载了，在JSX里引用.header样式还是会报错。我来帮你拆解问题并给出针对性的解决方案：

1. 修正服务端Webpack的样式处理配置 #

服务端打包时不能用style-loader（它依赖浏览器DOM），必须让Webpack把SCSS文件导出为纯类名字典，这样服务端渲染时能正确拿到类名字符串，不会尝试插入样式到DOM。修改你的webpack.config.server.js：

module.exports = {
  target: 'node', // 必须！告诉Webpack打包给Node.js环境使用
  // 其他配置（entry、output等）...
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          {
            loader: 'css-loader',
            options: {
              modules: {
                exportOnlyLocals: true, // 关键：只导出类名，不生成CSS代码
                localIdentName: '[name]__[local]--[hash:base64:5]', // 类名生成规则，要和客户端保持一致
              },
            },
          },
          'sass-loader',
        ],
      },
      // 其他loader（Babel等）...
    ],
  },
};

2. 保持客户端Webpack的样式配置正确 #

客户端可以正常用style-loader（开发环境）或mini-css-extract-plugin（生产环境）来注入样式，重点是类名生成规则要和服务端完全一致，修改webpack.config.dev.js：

module.exports = {
  // 其他配置...
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          'style-loader', // 开发环境把样式注入到DOM
          {
            loader: 'css-loader',
            options: {
              modules: {
                localIdentName: '[name]__[local]--[hash:base64:5]', // 和服务端一模一样的规则
              },
            },
          },
          'sass-loader',
        ],
      },
      // 其他loader...
    ],
  },
};

3. 组件中正确引用样式 #

不管用ES6 import还是CommonJS require，都要通过样式对象的属性来访问类名（因为CSS Modules会把类名哈希化，直接写className="header"是找不到的）：

// ES6 写法
import styles from './styles/Main.scss';

export default function SomeComponent() {
  return <div className={styles.header}>这是带样式的头部</div>;
}

// CommonJS 写法
const styles = require('./styles/Main.scss');

module.exports = function SomeComponent() {
  return <div className={styles.header}>这是带样式的头部</div>;
};

4. 排查常见的额外问题 #

• 如果还是报错，检查服务端打包的产物里，SCSS文件是否被正确处理成了导出类名的模块（可以直接查看打包后的server bundle文件）；
• 确保你的Express服务器在返回HTML时，已经引入了客户端打包的CSS文件（开发环境style-loader会自动注入，生产环境需要手动引入mini-css-extract-plugin生成的CSS文件）；
• 不要在服务端代码中直接调用任何依赖DOM的样式API（比如document.styleSheets）。

这样调整后，服务端渲染时能正确生成带哈希类名的HTML，客户端hydrate时也能匹配到对应的样式，就不会再出现样式引用错误的问题了。

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