webpack的css-loader、react-css-modules中生成的hash不一样

Question

webpack中像实现css Module的功能。
安装babel-plugin-react-css-modules后根据官方进行配置：插件的github

const config = WebpackMerge.merge(WebpackBase, {
  module: {
    rules: [
      {
        test: [/\.s[ac]ss$/i, /\.css$/i],
        use: [
          // "style-loader",
          MiniCssExtractPlugin.loader,
          {
            loader: "css-loader",
            options: {
              importLoaders: 1,
              modules: {
                localIdentName: "[path][name]__[local]--[sha256:hash:base64:5]",
              },
            },
          },
          "sass-loader",
        ],
      },
      {
        test: /\.(jsx|js)$/,
        loader: "babel-loader",
        options: {
          cacheDirectory: true,
          plugins: [
            [
              "react-css-modules",
              {
                context: path.join(__dirname, "../"),
                exclude: "node_modules",
                generateScopedName:
                  "[path][name]__[local]--[sha256:hash:base64:5]",
              },
            ],
          ],
        },
        exclude: [path.join(__dirname, "../node_modules")],
      },
    ],
  },
});

由于生成的hash不一致。className无法对应到相应的样式。

这里应该如何配置才能使得 hash值相等

Answer 1

原因：
去搜索了下，应该是最新版的css-loader6.2.0使用了新的hash算法，所以导致两者的生成的hash不一致

解决：
在webpack.config.js中使用"generic-names": "^3.0.0", 生成类名，在babel.config.js中使用生成类名，也就是通过generic-names让两者达成一致。

webpack.config.js 配置如下：

const genericNames = require('generic-names');
const generateScope = genericNames(localIdentName, {

context: process.cwd(),

});
const getStyleLoaders = (cssOptions, preProcessor = []) => {

const loaders = [

// require.resolve('style-loader'),

MiniCssExtractPlugin.loader,

// isProd ? MiniCssExtractPlugin.loader : require.resolve('style-loader'),

{

loader: require.resolve('css-loader'),

options: cssOptions,

},

];

if (preProcessor.length > 0) {

for (let item of preProcessor) {

loaders.push(require.resolve(item));

}

}

return loaders;

};
{

test: /\.scss$/,

exclude: /node_modules/,

include: path.resolve(__dirname, 'src'),

use: getStyleLoaders(

{

importLoaders: 1,

// modules: {

// localIdentName: '[name]__[local]_[hash:base64:5]',

// localIdentContext: path.resolve(__dirname, 'src'),

// },

modules: {

getLocalIdent({ resourcePath }, localIdentName, localName) {

return generateScope(localName, resourcePath);

},

},

},

['sass-loader']

),

},

babel.config.js 配置如下：

const genericNames = require('generic-names'); // v3.0.0
// babel-plugin-react-css-modules

[

'react-css-modules',

{

generateScopedName: '[name]__[local]_[hash:base64:5]',

filetypes: {

'.scss': {

syntax: 'postcss-scss',

},

},

exclude: 'node_modules',

},

],

Answer 2

新版的 css-loader 生成算法变了，简单的解决办法是回退到 css-loader@3.6.0 版本