如何在CSS Modules中正确编写嵌套类？解决语法错误

你遇到的语法错误是因为普通CSS不支持嵌套选择器和&父选择器语法，这种写法属于Sass/Scss或PostCSS这类预处理器的特性，而纯CSS Modules（.module.css文件）默认不支持这些语法。

方法1：转换成普通CSS写法（无需额外配置） #

把嵌套结构展开，用完整的选择器替代&，直接修改代码如下：

.Wrapper {
  list-style: none;
  box-sizing: border-box;
  padding-left: var(--spacing);
  margin-bottom: -1px;
}

.Wrapper.clone {
  display: inline-block;
  pointer-events: none;
  padding: 0;
  padding-left: 10px;
  padding-top: 5px;
}

.Wrapper.clone .TreeItem {
  --vertical-padding: 5px;
  padding-right: 24px;
  border-radius: 4px;
  box-shadow: 0px 15px 15px 0 rgba(34, 33, 81, 0.1);
}

.Wrapper.ghost.indicator {
  opacity: 1;
  position: relative;
  z-index: 1;
  margin-bottom: -1px;
}

.Wrapper.ghost.indicator .TreeItem {
  position: relative;
  padding: 0;
  height: 8px;
  border-color: #2389ff;
  background-color: #56a1f8;
}

.Wrapper.ghost.indicator .TreeItem:before {
  position: absolute;
  left: -8px;
  top: -4px;
  display: block;
  content: '';
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid #2389ff;
  background-color: #ffffff;
}

.Wrapper.ghost.indicator .TreeItem > * {
  opacity: 0;
  height: 0;
}

.Wrapper.ghost:not(.indicator) {
  opacity: 0.5;
}

.Wrapper.ghost .TreeItem > * {
  box-shadow: none;
  background-color: transparent;
}

方法2：启用预处理器/PostCSS支持（保留嵌套写法） #

如果想保留原有的嵌套语法，需要让项目支持预处理器或PostCSS：

选项A：改用Sass（.module.scss） #

1. 安装Sass依赖：

   npm install sass --save-dev
   # 或 yarn add sass --dev
   

2. 把所有.module.css文件重命名为.module.scss
3. 项目会自动识别并处理Sass的嵌套语法，无需修改现有代码结构

选项B：用PostCSS + postcss-nested插件 #

1. 安装依赖：

   npm install postcss postcss-nested --save-dev
   # 或 yarn add postcss postcss-nested --dev
   

2. 在项目根目录创建postcss.config.js：

   module.exports = {
     plugins: [
       require('postcss-nested'),
     ],
   };
   

3. 确保项目构建工具（如Webpack/Vite）的CSS loader已启用PostCSS（多数现代框架默认已配置）

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