1. when webpack uses css-loader, turn on css-modules,localIdentName and cannot read path
2. the configuration code is as follows

{
    test: /\.css$/,
    exclude: /node_modules/,
    use: [
      require.resolve("style-loader"),
      {
        loader: require.resolve("css-loader"),
        options: {
          importLoaders: 1,
          modules: true,
          localIdentName: "[path]__[name]__[local]___[hash:base64:5]",
        },
      },
      {
        loader: require.resolve("postcss-loader"),
        options: {
          // Necessary for external CSS imports to work
          // https://github.com/facebookincubator/create-react-app/issues/2677
          ident: "postcss",
          plugins: () => [
            require("postcss-flexbugs-fixes"),
            autoprefixer({
              browsers: [
                ">1%",
                "last 4 versions",
                "Firefox ESR",
                "not ie < 9", // React doesn"t support IE8 anyway
              ],
              flexbox: "no-2009",
            }),
          ],
        },
      },
    ],
  },
  {
    test: /\.css$/,
    use: [require.resolve("style-loader"), require.resolve("css-loader")],
    include: /node_modules/,
  },

the compilation result is as follows:

<div class="__style__bar___1gEOY">
    ...
</div>