Vite如何在构建后的.css文件中移除CSS嵌套规则？

Vite默认集成了Lightning CSS作为核心CSS处理工具，这就是你看到嵌套选择器被扁平化的根本原因——Lightning CSS会自动转译符合CSS规范的嵌套语法，无需额外安装postcss-nesting这类PostCSS插件。

具体处理流程 #

1. 资源识别与分流：当Vite构建时，会自动识别.css文件，将其纳入内置的CSS处理流水线，而非走PostCSS流程（除非你手动配置了PostCSS相关选项）。
2. Lightning CSS转译嵌套：Lightning CSS默认启用了CSS嵌套特性支持，它会按照CSS规范把嵌套选择器展开为标准的扁平选择器。例如：
   • 源CSS：

     .container {
       padding: 20px;
       .title {
         font-size: 24px;
       }
     }
     

   • 转译后：

     .container { padding: 20px; }
     .container .title { font-size: 24px; }
     

3. 后续构建优化：转译完成的CSS会进一步经过压缩、去重、哈希命名等优化步骤，最终输出到dist目录中。

为什么没用到PostCSS插件？ #

Vite在默认配置下，对于纯CSS文件优先使用Lightning CSS（相比PostCSS，它的处理速度更快）。Lightning CSS本身内置了CSS嵌套转译能力，完全覆盖了postcss-nesting的功能，因此无需额外安装插件就能完成嵌套语法的转译。

如何禁用该行为？ #

如果不需要自动转译嵌套选择器，可以在vite.config.js中关闭Lightning CSS的嵌套特性：

export default {
  css: {
    lightningcss: {
      features: {
        nesting: false
      }
    }
  }
}

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