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

Question

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

我已经尝试通过运行

安装插件

npm 安装 babel-plugin-react-css-modules --save

...正如项目中所说的那样(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 选项 modules 设置为 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
            }
          }
        ]
      },

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

How to setup babel-plugin-react-css-modules in create-react-app?

reactjs

babel-plugin-react-css-modules