postcss-nested 嵌套写法不生效是怎么回事？

UP主～若溪提问于 2026-03-05 08:39:19 阅读 55

工具

我用 Vite + PostCSS 配置了 postcss-nested，但写嵌套 CSS 时完全没效果，编译后还是原样输出，是不是插件没生效？

我已经在 postcss.config.js 里加了插件，也装了依赖，但下面这种写法就是不编译：

.container {
  color: red;
  & .item {
    font-size: 14px;
  }
}

控制台也没报错，就是输出的 CSS 跟源码一模一样，连 & 符号都没处理。我试过把插件放到 plugins 数组第一个，还是不行。

CSS3

我来解答赞 14 收藏

反馈

1 条解答

令狐艳丽 Lv1

哈，这个问题我也踩过坑，当时折腾了好久才发现问题出在哪。关键点在于Vite默认的CSS处理方式。

首先确认下你的postcss.config.js配置是不是这样的：

module.exports = {

  plugins: [

    require('postcss-nested')

  ]

}

如果配置没问题，那问题大概率出在Vite的CSS处理上。Vite默认只会对.module.css后缀的文件应用PostCSS处理。所以你有两个选择：

1. 把你的CSS文件重命名为xxx.module.css
2. 或者修改vite.config.js，强制对所有CSS文件处理：

export default defineConfig({

  css: {

    postcss: {

      // 这个配置会让Vite对所有CSS文件应用PostCSS

      // 而不是仅对.module.css文件

    }

  }

})

我当时就是被这个.module.css的默认规则坑了，死活不生效。另外注意检查下你的CSS文件导入方式，确保不是通过@import引入的，那个也会影响处理。

最后再吐槽下，Vite这个默认行为真的很容易踩坑，官方文档也不够明显，害我浪费了半天时间...

2026-03-05 09:12