4

我真的很喜欢 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 新手，并且一直在寻找解决方案。

4

1 回答 1

3

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
            }
          }
        ]
      },
于 2019-08-04T18:40:37.923 回答