同时配置Semantic UI React与普通CSS文件加载器时遇到问题

嘿，这个坑我太熟了！单独配置semantic-ui-css的加载器和普通CSS加载器都没问题，放一起就罢工，十有八九是webpack的规则匹配逻辑或者loader配置冲突搞的鬼。我来给你拆解下常见问题和解决办法：

1. 规则匹配顺序与范围没搞对 #

webpack是按module.rules数组的顺序来匹配文件的，如果你的普通CSS规则（比如匹配所有.css）写在了semantic规则前面，那semantic的semantic.min.css会先被普通CSS loader处理，而普通loader可能没适配semantic的资源（比如字体图标、特殊样式语法），直接就崩了。

解决办法：把更具体的规则放在前面，同时用include/exclude精准锁定文件范围：

module.exports = {
  module: {
    rules: [
      // 先处理semantic的CSS，只匹配node_modules里的semantic-ui-css文件
      {
        test: /\.css$/,
        include: /node_modules\/semantic-ui-css/,
        use: [
          'style-loader',
          'css-loader',
          // 如果semantic的字体图标加载有问题，再加个url-loader处理
          {
            loader: 'url-loader',
            options: {
              limit: 8192, // 小文件转base64，大文件输出
              name: 'fonts/[name].[hash:8].[ext]'
            }
          }
        ]
      },
      // 再处理自己项目的普通CSS，排除semantic的文件
      {
        test: /\.css$/,
        exclude: /node_modules\/semantic-ui-css/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              // 如果你的普通CSS用了CSS Modules，这里要开启，semantic不能开！
              modules: true,
              localIdentName: '[name]__[local]--[hash:base64:5]'
            }
          },
          'postcss-loader' // 比如你自己的postcss/autoprefixer配置
        ]
      }
    ]
  }
}

2. 没用到oneOf导致重复匹配 #

如果你的两个规则都能匹配同一个文件（比如semantic的css同时满足两个.css规则），webpack会让两个规则的loader都跑一遍，这很容易引发冲突（比如一个加了CSS Modules，一个没加）。

解决办法：用oneOf包裹两个规则，确保每个文件只匹配其中一个：

module.exports = {
  module: {
    rules: [
      {
        oneOf: [
          {
            test: /\.css$/,
            include: /node_modules\/semantic-ui-css/,
            use: ['style-loader', 'css-loader']
          },
          {
            test: /\.css$/,
            exclude: /node_modules/,
            use: ['style-loader', 'css-loader?modules', 'postcss-loader']
          }
        ]
      }
    ]
  }
}

3. CSS Loader的选项冲突 #

最常见的就是CSS Modules的问题：如果你的普通CSS开启了modules: true，但没给semantic的规则单独关闭，那semantic的类名会被哈希化（比如ui变成App__ui--abc123），导致样式完全失效。

一定要记得：semantic的CSS不能开CSS Modules，自己的项目CSS按需开启，分开配置loader选项就行，就像第一个示例里那样。

最后排查小技巧 #

• 运行webpack的时候加--debug参数，看看每个文件匹配了哪些规则，很容易找到重复匹配的问题
• 检查loader版本，比如css-loader v4+和v3的选项语法有变化，别混用版本

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