反応アプリを作成した後、元のクラス名で scss_module を構成して有効にします

create react app を使用してプロジェクトを作成した後、
次のファイルを使用して sass ファイルの className をインポートしても効果がありません

成功した scss ファイルのファイル名がページ内でまったく参照されていないことがわかりました

creat react app のデフォルトの sass モジュール設定項目を true に変更. ファイル名は有効になっているが、すべてのクラス名がグローバルに識別可能なハッシュ値になっている. css のため、現在のクラス名がどの要素であるかを判断することは不可能-

ローダー デフォルトのハッシュ アルゴリズムは [hash:base64] で、.title を ._3zyde4l1yATCOkgn-DBWEL のような文字列にコンパイルします。

ハッシュ文字列の形式は、webpack.config.js でカスタマイズできます。

前にこのように css-loader を設定しました

module: {
    
    
  loaders: [
    // ...
    {
    
    
      test: /\.css$/,
      loader: "style-loader!css-loader?modules&localIdentName=[path][name]---[local]---[hash:base64:5]"
    },
  ]
}

次に、オブジェクトを使用して css-loader を構成するように変更し、モジュール構成を同じ方法でモードに入れます。

//  启用 css modules, css模块化, 所有类名都默认为当前组件,或者使用 :global 声明全局样式, 参考 AntDesignPro 的样式引用
modules: {
    
    
	// mode: 'icss',
    // modules: true,
    localIdentName: '[name]__[local]--[hash:base64:5]',  // 配置name为当前组件名，之后CLASS名为【当前组件名+原本class名+hash值】
    localIdentName: '[local]--[hash:base64:5]',  // CLASS名为【当前组件名+原本class名+hash值】
    exportGlobals: true, // 注意！:global 声明全局样式需要该属性
},
                 

これで目標を達成できます！