cssモジュールセットlocalIdent、スタイルが無効、ハッシュエラー、webpack。getLocalIdentの不一致

今日、cssモジュールを使用してReactプロジェクトに取り組んでいたとき、プロジェクトの開始後にスタイルが乱れて失われていることに気付きました。
動作は
、要素を調べてスタイルが欠落していることを見つけ、関連するスタイルを検索し、それを見つけることです。 cssは存在しますが、ハッシュが異なります。

場所の理由は次のとおりです。

  1. プロジェクトはbabel-plugin-react-css-modulesを使用します

.babelrc

{
    
    
  "plugins": [
    ["react-css-modules", {
    
    
      "option": "value",
      exclude: 'node_modules',
        autoResolveMultipleImports: true,
        filetypes: {
    
    
          '.scss': {
    
    
            syntax: 'postcss-scss',
            plugins: ['postcss-nested'],
          },
        },
        generateScopedName: XXXXX,
    }]
  ]
}
  1. webpackでcss-loaderを使用します。
{
    
    
            loader: 'css-loader',
            options: {
    
    
              modules: true,
              localIdent: [folder]-[local]__[hash]
            },
          }

重要なのは、ハッシュの生成が異なるということです。したがって、ハッシュに一貫性があり、問題が解決されていることを確認してください。

おすすめ

転載: blog.csdn.net/xieamy/article/details/124433924