React项目中CSS样式化Root元素无效问题求助

API 探路者

2026-5-13

问题根源&解决方案

嘿，我一眼就发现问题所在了——你的Webpack配置里处理CSS时只用到了css-loader，但它的能力仅仅是解析CSS里的@import和url()这类依赖引用，完全不会把解析后的样式注入到浏览器DOM中，这就是为什么你的index.css样式根本没生效的原因。

修复步骤：

先安装style-loader依赖（它负责把样式注入到页面）：

npm install style-loader --save-dev

修改Webpack配置里的CSS规则，把style-loader加到use数组的最前面（记住Webpack的loader是从后往前执行的，所以style-loader要放在css-loader前面）：

const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
 module: {
  rules: [
   {
    test: /\.(js|jsx)$/,
    exclude: /node_modules/,
    use: {
     loader: "babel-loader"
    }
   },
   {
    test: /\.html$/,
    use: [
     {
      loader: "html-loader"
     }
    ]
   },
   {
    test: /\.css$/,
    // 这里添加style-loader，顺序不能乱
    use: ['style-loader', 'css-loader'],
   },
  ]
 },
 plugins: [
  new HtmlWebPackPlugin({
   template: "./src/index.html",
   filename: "./index.html"
  })
 ]
};