Webpack中CSS Modules嵌套类不生效问题排查与解决

嘿，这个问题我刚好踩过坑！原因很简单：你在Carousel.css里用了嵌套选择器，但原生CSS和默认的css-loader并不支持这种预处理器风格的语法，导致.test的样式根本没被编译成有效的CSS规则，自然不会生效。父元素的.carousel能正常生效，只是因为它是标准的CSS写法，没有用到嵌套。

为什么会这样？ #

你写的CSS嵌套代码：

.carousel {
  background-color: red;
  .test {
    width: 200px;
  }
}

默认情况下css-loader只会处理CSS Modules的类名转换，不会解析这种嵌套结构，所以这段代码在编译后，.test的样式不会被识别为.carousel .test的后代选择器，相当于无效代码。

解决方法（采用postcss-loader + postcss-nested） #

这是个轻量化的解决方案，不需要切换到Sass/Less这类预处理器：

1. 安装依赖
   先安装所需的开发依赖：

   npm install -D postcss-loader postcss-nested
   

2. 更新Webpack配置
   修改Webpack中处理CSS的规则，把postcss-loader加到css-loader之后（loader的执行顺序是从后往前的）：

   module.exports = {
     mode: "development",
     entry: __dirname + "/app/index.js",
     module: {
       rules: [
         {
           test: /\.js$/,
           exclude: /node_modules/,
           loader: "babel-loader"
         },
         {
           test: /\.css$/,
           use: [
             "style-loader",
             {
               loader: "css-loader",
               options: {
                 modules: true,
                 localIdentName: "[name]__[local]___[hash:base64:5]"
               }
             },
             "postcss-loader" // 添加这一行
           ]
         }
       ]
     },
     output: {
       filename: "bundle.js",
       path: __dirname + "/build"
     },
     plugins: [HTMLWebpackPluginConfig]
   };
   

3. 创建PostCSS配置文件
   在项目根目录新建postcss.config.js，配置postcss-nested插件来解析嵌套语法：

   module.exports = {
     plugins: [
       require("postcss-nested")({
         // 可选：可以设置嵌套深度等配置，默认即可满足需求
       })
     ]
   };
   

完成以上配置后，重新打包项目，postcss-nested会把你的嵌套CSS编译成标准的后代选择器：

.carousel {
  background-color: red;
}
.carousel .test {
  width: 200px;
}

这样你的.test样式就能正常生效了！

当然，你也可以选择使用Sass/Less这类预处理器来实现嵌套，只要对应配置sass-loader/less-loader即可，不过postcss的方案更轻量化，不需要改变你现有的CSS文件写法。

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