如何在create-react-app中设置babel-plugin-react-css-modules？

Question

我真的很喜欢babel-plugin-react-css-modules分别为全局和本地样式提供的className和styleName的分隔，但是让插件与create-react-app一起使用时遇到了一些麻烦。

我试着通过运行安装插件

npm install babel-plugin-react-css-modules-保存

...就像在项目中所说的那样（github https://github.com/gajus/babel-plugin-react-css-modules#css-modules ）...

...并且还按照类似线程（＃5113）中的建议使用了craco，以帮助克服create-react-app的限制，而无需弹出，但仍然无法导入scss文件并使用styleName对其进行引用。

有人知道我是否在这里还缺少其他东西吗？ 抱歉，如果这是一个菜鸟问题，我是React的新手，并且一直在寻找解决方案。

Answer 1

1.首先将插件添加到.babelrc 。

  "plugins": [
      ["babel-plugin-react-css-modules",
      {
        "webpackHotModuleReloading": true,
        "autoResolveMultipleImports": true
      }],.... 
  ]

2.在webpack.config.js中添加CSS规则。

以下是您可以参考的我的配置。

确保

2.1选项模块设置为true。

2.2 localIdentName遵循这种格式。 localIdentName: "[path]___[name]__[local]___[hash:base64:5]"

 module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /(node_modules|bower_components)/,
        use: [
          {
            loader: "babel-loader",
            options: { cacheDirectory: true }
          }
        ]
      },
      {
        test: /\.css$/i,
        use: [
          {
            loader: ExtractCssChunks.loader,
            options: { hot: true }
          },
          {
            loader: "css-loader", //generating unique classname
            options: {
              importLoaders: 1, // if specifying more loaders
              modules: true,
              sourceMap: false,
              localIdentName: "[path]___[name]__[local]___[hash:base64:5]" //babel-plugin-css-module format
              //localIdentName: "[path][name]__[local]" //recommended settings by cssloader#local-scope , this option generate unique classname for compiled css
            }
          }
        ]
      },