Question

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

我尝试通过运行安装插件

npm install 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？

1 个答案: