babel-plugin-react-css-modules无法输出样式问题咨询

我来帮你排查这个问题，结合你的项目环境（launchpad、webpack4.2.0、React16），大概率是配置细节没对齐，咱们一步步来解决：

1. 先确保css-loader正确开启CSS Modules功能 #

babel-plugin-react-css-modules依赖css-loader的模块化配置，如果css-loader没开启modules，插件生成的styleName就无法对应到正确的CSS类名。你需要在webpack的css-loader配置里加上这些参数：

{
  test: /\.css$/,
  use: [
    'style-loader', // 或者mini-css-extract-plugin，根据你的打包方式选择
    {
      loader: 'css-loader',
      options: {
        modules: true, // 必须开启，这是CSS Modules的核心开关
        localIdentName: '[name]__[local]___[hash:base64:5]', // 生成类名的规则，后面要和babel插件保持完全一致
        // 如果用了postcss，可额外添加importLoaders: 1
      }
    }
    // 若使用postcss，此处需追加postcss-loader
  ]
}

2. 在babel-loader的options里补全react-css-modules的关键配置 #

你提到无法在.babelrc里设置context，那必须在webpack的babel-loader配置里直接给插件传参数，尤其是context和generateScopedName这两个核心项：

const path = require('path');

// ... 其他webpack配置
module: {
  rules: [
    {
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {
          plugins: [
            'react-hot-loader/babel',
            'transform-runtime',
            // 补全react-css-modules的配置
            [
              'react-css-modules',
              {
                context: path.resolve(__dirname, './src'), // 必须是源码目录的绝对路径，和webpack的context保持一致
                generateScopedName: '[name]__[local]___[hash:base64:5]', // 和css-loader的localIdentName完全相同
                filetypes: {
                  '.css': { syntax: 'css' } // 如果用postcss就改成'postcss'
                },
                exclude: 'node_modules',
                handleMissingStyleName: 'warn' // 可选，用来提示找不到对应样式的警告
              }
            ]
          ]
        }
      }
    }
    // ... 其他loader规则
  ]
}

这里的context必须用绝对路径（通过path.resolve生成），不然插件无法正确关联你的组件和对应的CSS文件。

3. 检查组件内styleName的使用是否正确 #

确保你在组件里用的是styleName而不是className，插件只会转换styleName属性：

// 正确写法
import styles from './MyComponent.css';
<div styleName="container">Hello World</div>

// 错误写法（插件不会处理）
<div className="container">Hello World</div>

4. 排查其他可能的配置冲突 #

• 检查webpack的resolve.extensions是否包含.css，确保webpack能正确解析CSS文件：

  resolve: {
    extensions: ['.js', '.jsx', '.css']
  }
  

• 避免和其他样式处理插件冲突，比如如果你用了styled-components或者babel-plugin-styled-components，要确保它们的执行顺序不会干扰react-css-modules。

按照上面的步骤调整后，应该就能让插件正确生成对应模块化CSS的类名了。

内容的提问来源于stack exchange，提问作者Yazdog8