Question

所以我将webpack和css-loader与localIndentName一起用于服务器端使用react渲染我的应用程序。我正在使用css模块为特定组件导入css。现在的问题是，在组件中导入样式时，服务器将在本地键内返回css映射的对象，因此服务器无法找到styles.className，而在客户端则一切正常。

这是我为服务器和客户端修改的规则配置

{
        test: /\.css$/,
        use: [
            {
                loader: 'css-loader',
                options: {
                    modules: true,
                    localIdentName: '[local]__[hash:base64:4],
                    camelCase: true
                }
            }
        ],
}

这是我控制台记录任何导入样式时获得的服务器服务器

[ [ 107,
    '',
    '' ],
  toString: [Function],
  i: [Function],
  locals: { 'class-name': 'class-name__3WnY' } ]

这是我的客户抱怨的

Warning: Prop `className` did not match. Server: "" Client: "class-name__3WnY"

为什么这样的行为？

Answer 1

该错误是由服务器端错误的加载程序引起的。

在服务器端，我们应该使用

loader: 'css-loader/locals',

在客户端，我们应该使用

loader: 'css-loader',

有关完整的Webpack配置，请检查我之前做过的this answer。希望对您有所帮助。

服务器和客户端的className不匹配

1 个答案: