在Create React App中结合CSS Modules应用Bootstrap CSS的问题排查

嘿，我来帮你搞定这个问题！你遇到的Bootstrap不生效的情况，主要是webpack配置的路径匹配写错了，而且其实你完全没必要手动修改webpack配置——Create React App本身就自带了完美适配的方案，下面给你一步步拆解：

核心原因分析 #

1. webpack配置的路径匹配错误
   你在配置里用了字符串exclude: '/node_modules/bootstrap/'和include: '/node_modules/bootstrap/'，但webpack的exclude/include选项需要的是正则表达式（或者匹配函数），而不是精确字符串。这个字符串只会匹配路径完全等于/node_modules/bootstrap/的文件，而实际项目里Bootstrap的绝对路径肯定不是这个，导致这条规则根本没命中Bootstrap的CSS文件，最终Bootstrap的样式被错误地应用了CSS Modules的哈希化处理，自然就失效了。

2. 没必要手动修改webpack配置
   从Create React App 2.x版本开始，官方已经原生支持CSS Modules了——只要你的组件CSS文件命名为[文件名].module.css（比如Header.module.css），CRA会自动对这类文件启用CSS Modules，而node_modules里的所有CSS（包括Bootstrap）会默认全局生效，完全不用改webpack配置，手动修改反而容易破坏原有规则。

解决方案 #

方案一：用CRA原生CSS Modules（推荐，零配置） #

这是官方最推荐的方式，简单又安全：

• 把你自己的组件CSS文件重命名为xxx.module.css，比如把Button.css改成Button.module.css
• 在组件里导入并使用：

  import styles from './Button.module.css';
  
  // 使用时
  <button className={styles.btn}>我的按钮</button>
  

• 保持index.js里的Bootstrap导入不变：

  import 'bootstrap/dist/css/bootstrap.min.css';
  import 'bootstrap/dist/css/bootstrap-theme.css';
  
  ReactDOM.render(<App />, document.getElementById('root'));
  registerServiceWorker();
  

这样Bootstrap会全局生效，你的组件CSS会通过CSS Modules局部作用，完全不用碰webpack配置，也不会有冲突问题。

方案二：手动修正webpack配置（不推荐，仅适合已eject的项目） #

如果你已经执行了npm run eject一定要手动改配置，那修正路径匹配规则：
把原来的配置里的exclude和include改成正则表达式：

// 处理自定义CSS，启用CSS Modules，排除所有node_modules文件
{
  test: /\.css$/,
  exclude: /node_modules/, // 用正则匹配所有node_modules目录
  use: [
    require.resolve('style-loader'),
    {
      loader: require.resolve('css-loader'),
      options: {
        importLoaders: 1,
        modules: true,
        localIdentName: '[name]__[local]__[hash:base64:5]',
      },
    },
    {
      loader: require.resolve('postcss-loader'),
      options: {
        ident: 'postcss',
        plugins: () => [
          require('postcss-flexbugs-fixes'),
          autoprefixer({
            browsers: [
              '>1%',
              'last 4 versions',
              'Firefox ESR',
              'not ie < 9',
            ],
            flexbox: 'no-2009',
          }),
        ],
      },
    },
  ],
},
// 处理node_modules里的CSS，不启用CSS Modules
{
  test: /\.css$/,
  include: /node_modules/, // 用正则匹配所有node_modules目录
  use: ['style-loader', 'css-loader']
}

修改后重启开发服务器，Bootstrap的样式应该就能正常生效了。

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