React-Toolbox是否适配Webpack 4？升级后组件样式异常问题咨询

Hey there, 我之前帮好几个开发者排查过一模一样的问题，先给你明确答案：React-Toolbox已经适配Webpack 4，但切换到MiniCssExtractPlugin替代旧版ExtractTextPlugin时，确实很容易出现带图标按钮、对话框这类组件样式丢失的情况，不少升级Webpack 4的开发者都踩过这个坑。

问题核心原因 #

React-Toolbox的样式依赖CSS Modules做类名映射，而MiniCssExtractPlugin和ExtractTextPlugin在处理模块化CSS的逻辑上有差异——默认配置下，Webpack可能没正确解析React-Toolbox组件的样式类名映射关系，导致组件渲染时找不到对应的样式规则。

可行的解决方案 #

给你整理几个经过验证的解决步骤：

• 调整Webpack CSS规则配置：针对React-Toolbox的CSS文件单独开启CSS Modules，并确保MiniCssExtractPlugin正确参与处理，示例配置如下：

  module.exports = {
    module: {
      rules: [
        {
          test: /\.css$/,
          // 只针对react-toolbox的CSS开启模块化处理
          include: /node_modules\/react-toolbox/,
          use: [
            MiniCssExtractPlugin.loader,
            {
              loader: 'css-loader',
              options: {
                modules: true,
                localIdentName: '[name]__[local]___[hash:base64:5]',
                camelCase: true
              }
            }
          ]
        },
        // 你的项目其他CSS规则可以保留原有配置
        {
          test: /\.css$/,
          exclude: /node_modules\/react-toolbox/,
          use: [MiniCssExtractPlugin.loader, 'css-loader']
        }
      ]
    },
    plugins: [
      new MiniCssExtractPlugin({ filename: 'styles/[name].css' })
    ]
  };
  

• 规范组件导入方式：确保你按照React-Toolbox的要求导入组件和样式，比如：

  import Button from 'react-toolbox/lib/button';
  import 'react-toolbox/lib/button/style.css';
  

  嫌手动导入麻烦的话，也可以用babel-plugin-react-toolbox插件自动注入样式，避免遗漏。
• 升级React-Toolbox版本：如果你的项目用的是较老的React-Toolbox版本，建议升级到最新稳定版——早期版本对Webpack 4的兼容性处理不够完善，新版本已经修复了不少这类样式解析问题。

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