css - React SSR 应用程序中服务器和客户端的 Webpack localIdentName 不匹配

Question

我正在尝试将 Css 模块与 React SSR 一起使用，并且我添加了以下 webpack 配置。

module: {
        rules: [
            {
                test: /\.jsx?$/,
                exclude: /(node_modules|bower_components)/,
                loader: "babel-loader",
            },{
                test:/\.(s*)css$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            modules: {
                                mode: 'local',
                                localIdentName: "[name]__[local]___[hash:base64:5]"
                            },
                            import: true,
                            importLoaders: true,
                        }
                    },
                    {
                        loader: "sass-loader",
                    }
                ],
            },
        ]
    },

这会在 dist 包中生成以下 css 文件

.Home\.module__Container___3B08 {
  display: flex;
  width: 600px;
  height: 300px;
  border: 2px solid red; }

在我的 DOM 中，div 具有以下样式

<div class="Home-module__Container___14QBF">

我该如何纠正？以及为什么 webpack 配置与浏览器中的配置不同

Answer 1

您必须在插件下的 .babelrc 文件中添加 CSS 模块配置。然后只有生成的 CSS 才会与您的 html 中的 CSS 相匹配。

.babelrc

"plugins": [
   ["react-css-modules", {
     "generateScopedName": "[name]__[local]___[hash:base64:5]"
    }]
 ],

更新:

必须使用 css-modules-require-hook 进行服务器端 CSS 渲染，并使用 generic-names 在客户端和服务器中生成哈希。

索引.js

const hook = require( "css-modules-require-hook" );
const genericNames = require( "generic-names" );

const generate = genericNames( "[name]__[local]___[hash:base64:5]", {
   context: process.cwd(),
});

// Scope Generator function.
hook( {
    generateScopedName: ( c, path ) => {
        return generate( c, path );
    },
} ); 

webpack.config.js

const genericNames = require( "generic-names" );
const generate = genericNames( "[name]__[local]___[hash:base64:5]", {
  context: process.cwd(),
});

const getLocalIdent = ( loaderContext, localIdentName, localName ) =>
    generate( localName, loaderContext.resourcePath );

.....
{
    loader: "css-loader",
    options: {
        modules: {
           getLocalIdent,
        },
     },
 },

有关更多信息，请查看此存储库:https://github.com/ajayvarghese/react-ssr/tree/css-modules . 注意:Repo 使用更新版本的 babel 包。