React 服务器端渲染配置 CSS Module 的方法

本文主要是介绍React 服务器端渲染配置 CSS Module 的方法，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

模块的版本

"css-loader": "^6.3.0",
"isomorphic-style-loader": "^5.3.2",
"style-loader": "^3.3.0"

1. 客户端 CSS 的 webpack 配置

{
    module: {
        rules: [
            {
                test: /\.css?$/,
                use: ['style-loader', {
                    loader: 'css-loader',
                    options: {
                        importLoaders: 1,
                        modules: {
                            // 自定义生成的类名
                            localIdentName: '[name]_[local]_[hash:base64:5]',
                        }
                    }
                }]
            }
        ],
    },
};

2. 服务器端 CSS 的 webpack 配置

{
    module: {
        rules: [
            {
                test: /\.css?$/,
                use: ['isomorphic-style-loader', {
                      loader: 'css-loader',
                      options: {
                        importLoaders: 1,
                        esModule: false,
                        modules: {
                            // 自定义生成的类名
                            localIdentName: '[name]_[local]_[hash:base64:5]',
                        }
                      }
                }]
            }
        ],
    },
};

这篇关于React 服务器端渲染配置 CSS Module 的方法的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！