如何解决React应用中Webpack加载CSS样式不生效问题？

1. Loader 执行顺序错误 #

Webpack 的 loader 遵循从右到左/从下到上的执行顺序，你的 CSS loader 顺序完全颠倒了。正确的处理流程应该是：先通过 postcss-loader 处理 CSS 兼容性，再用 css-loader 解析 CSS 语法，最后用 style-loader 将样式注入到 DOM 中。另外你配置了 sass-loader，但你的文件都是 .css 后缀，这个 loader 属于多余配置，会导致无效处理。

2. CSS Modules 与全局样式冲突 #

你开启了 css-loader 的 modules: true，这会把所有 CSS 文件都当作模块化样式处理——原始类名会被编译成随机哈希字符串。如果你的 index.css 和 App.css 是全局样式（直接在组件中使用原始类名），自然会出现样式匹配失效的问题。

3. Resolve Extensions 配置错误 #

Webpack 5 不再支持空字符串作为扩展名，resolve.extensions 里的 '' 需要移除，否则可能导致文件解析异常。

修改后的 webpack.config.js #

const path = require('path');
const BUILD_DIR = path.resolve(__dirname + '/public/build');
const APP_DIR = path.resolve(__dirname + '/src');

module.exports = {
  experiments: {
    asyncWebAssembly: true,
    topLevelAwait: true,
    layers: true
  },
  resolve: {
    // 移除空字符串，保留需要的扩展名
    extensions: ['.js', '.jsx', '.css']
  },
  entry: [APP_DIR + '/index.js'],
  // 建议在 index.js 中导入 CSS（而非直接放 entry），更符合模块化规范：
  // 例如在 index.js 里添加：import './index.css'; import './App.css';

  output: {
    path: BUILD_DIR,
    filename: 'bundle.js'
  },

  mode: 'development',
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react'] // 补充 React 预设，否则 JSX 无法正常编译
          }
        }
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: false, // 全局样式关闭 modules
            },
          },
          'postcss-loader' // 移除无用的 sass-loader
        ],
      },
    ]
  }
};

额外注意事项 #

• 确保已安装所有必需依赖，若未安装执行：

  npm install --save-dev style-loader css-loader postcss-loader @babel/preset-react
  

• 如果后续需要混用全局样式与模块化样式，可以拆分规则：

  // 处理模块化样式（文件名需为 *.module.css）
  {
    test: /\.module.css$/,
    use: [
      'style-loader',
      {
        loader: 'css-loader',
        options: {
          modules: true,
        },
      },
      'postcss-loader'
    ],
  },
  // 处理全局样式
  {
    test: /\.css$/,
    exclude: /\.module.css$/,
    use: ['style-loader', 'css-loader', 'postcss-loader'],
  }
  

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