Webpack项目实现CSS Module与全局样式共存的方法

webpack 的 css 模块功能用得顺手，和外部包样式打架的问题也挺常见的。是用了像antd-mobile这种组件库之后，样式一转css-loader就全变成局部了，直接乱套。

简单说，css-loader配了modules: true，项目自己的样式能模块化是好事，但 npm 包里的样式也被一锅端就麻烦了。你点个按钮，结果样式飞了，页面直接崩盘。

办法其实不难，加个条件判断就行了。css-loader那边加个exclude: /node_modules/，或者用oneOf来分情况。这样你项目里的走css module，外部包的还是正常全局样式，互不干扰。

比如：

module: {
  rules: [
    {
      test: /\.css$/,
      oneOf: [
        {
          include: /node_modules/,
          use: ['style-loader', 'css-loader']
        },
        {
          exclude: /node_modules/,
          use: [
            'style-loader',
            {
              loader: 'css-loader',
              options: {
                modules: true,
                localIdentName: '[hash:base64:6]'
              }
            }
          ]
        }
      ]
    }
  ]
}

这样配下来，像antd-mobile的按钮样式还能正常显示，你自己的样式也有命名空间，互不污染，干干净净。

如果你项目里同时用了多个 UI 库或者自己也写了不少样式，这种方式真的蛮实用的。还想深入了解？可以看看这些相关文章：

• react antd-mobile webpack 房贷计算器
• webpack-handle-css-loader Webpack CSS 器
• Webpack 加载器：typed-css-modules-loader
• css-modules-typescript-loader

如果你也遇到类似冲突，可以试试上面这套配置。用起来还挺顺，坑少，效率高。