React中CSS导入无法用字符串字面量做className？如何配置Webpack

我明白你的困惑——你开启了CSS Modules后，直接用字符串写className="cake"样式不生效，但看到很多人都这么用，想知道怎么调整配置或者哪里没设置对。

先给你理清核心原因：当Webpack的css-loader开启modules: true时，所有CSS类名都会被转换为唯一的哈希值（比如._cake_abc123），这是CSS Modules的核心特性——样式局部隔离。你直接写className="cake"时，DOM元素的类名是cake，但实际生成的CSS里类名是哈希后的，自然匹配不上，所以样式不生效；而成功写法里styles.cake对应的就是这个哈希后的类名，所以能正常渲染。

下面给你几个解决方案，根据你的需求选择：

方案1：用CSS Modules的全局类语法（推荐） #

这个方法既能保留CSS Modules的局部隔离特性，又能让特定类名用字符串字面量直接引用。

修改你的style.css，把需要全局引用的类用:global()包裹：

:global(.cake) {
  color: red;
}

这样你的Webpack配置不用改，其他类名依然会被模块化隔离，只有cake类保持原样。这时候你就可以用你最初的「失败写法」代码，样式会正常生效：

import React from "react";
import ReactDOM from "react-dom";
import './style.css';
function App() {
  return ( <div className="cake">Hello!</div> );
}
ReactDOM.render(<App />, document.querySelector("#root"));

方案2：关闭CSS Modules（适合不需要样式隔离的场景） #

如果你不需要CSS Modules的局部隔离功能，直接把Webpack配置里的modules设为false即可：

{
  test: /\.css$/,
  use: [
    "style-loader",
    {
      loader: "css-loader",
      options: { modules: false } // 这里改为false
    }
  ]
}

这样导入CSS后，所有类名都不会被修改，直接用className="cake"就能生效，和普通的CSS引入逻辑一样。但要注意，这种方式会失去样式隔离，不同组件的同名类会互相影响。

方案3：启用CSS Modules的全局模式 #

另一种方式是把modules设置为"global"，这会让所有类名默认都是全局的，效果和方案2类似，但属于CSS Modules的全局模式：

{
  test: /\.css$/,
  use: [
    "style-loader",
    {
      loader: "css-loader",
      options: { modules: "global" }
    }
  ]
}

同样，此时导入的CSS类名保持原样，直接用字符串字面量写className即可。

为什么别人的字符串写法能生效？ #

网上很多示例用字符串字面量直接写className，通常是因为他们的Webpack配置没有开启CSS Modules（css-loader默认modules: false），或者用的是普通的CSS导入，没有启用样式隔离特性。这种情况下，CSS类名不会被修改，自然可以直接用字符串引用。

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