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来在客户端和服务器中生成哈希。

index.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软件包的更新版本。

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

1 个答案: