Webpack：React中如何用CSS Modules并全局引入外部库CSS？

嘿，这个问题我熟！当用CSS Modules时，外部库的全局CSS确实会被Webpack当成模块化样式处理，导致没法直接全局生效。别担心，下面有几种实用的解决办法：

方法1：自定义Webpack项目直接修改配置 #

如果你的项目是自己配置Webpack的，直接调整CSS处理规则，把外部库的CSS排除在CSS Modules之外就行。

在Webpack配置文件里，用oneOf区分模块化和全局CSS的处理逻辑：

module.exports = {
  module: {
    rules: [
      // 处理带.module.css后缀的模块化CSS文件
      {
        test: /\.module\.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: {
                localIdentName: '[name]__[local]--[hash:base64:5]',
              },
            },
          },
        ],
      },
      // 处理全局CSS（包括node_modules里的外部库文件）
      {
        test: /\.css$/,
        exclude: /\.module\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};

这样设置后，所有不带.module.css后缀的CSS文件（比如你要引入的draft-js/dist/Draft.css）都会被当作全局CSS直接注入页面，不用再通过对象取类名。

方法2：Create React App项目（无需eject） #

如果是Create React App创建的项目，不想折腾eject的话，用react-app-rewired和customize-cra就能轻松修改默认配置：

1. 先安装依赖：

npm install react-app-rewired customize-cra --save-dev

2. 在项目根目录新建config-overrides.js文件，写入以下配置：

const { override, adjustStyleLoaders } = require('customize-cra');

module.exports = override(
  adjustStyleLoaders((loaders) => {
    // 把CSS Modules规则限定在带.module.css的文件上
    loaders.oneOf.forEach((oneOfLoader) => {
      if (oneOfLoader.test.toString().includes('.module')) {
        oneOfLoader.test = /\.module\.css$/;
      } else {
        // 非模块化CSS处理，自动排除模块化文件，同时兼容node_modules里的全局CSS
        oneOfLoader.exclude = /\.module\.css$/;
      }
    });
  })
);

3. 修改package.json里的启动脚本：

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test"
}

改完之后，你就能正常在src/index.js里引入外部库的CSS了：

import 'draft-js/dist/Draft.css';
import 'react-responsive/css/react-responsive.css';

方法3：临时全局引入（快速小方案） #

如果只是少数几个外部CSS需要全局引入，也可以在你的模块化CSS文件里用:global()包裹@import语句：

/* 比如在App.module.css中 */
:global {
  @import 'draft-js/dist/Draft.css';
}

不过这个方法适合少量文件，多了的话还是推荐前两种配置层面的方案，更易于维护。

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