元素
元素
工具
博客
问答

Vite 和 Webpack 在处理 CSS 嵌套时配置有什么不同？

梦幻 Dev 阅读 62
前端

我最近从 Webpack 切换到 Vite，发现原来在 Webpack 里能正常用的 CSS 嵌套写法在 Vite 里直接报错了，是不是要额外装插件？

我在组件里写了这样的样式：

.container {
  background: #fff;
  .header {
    font-size: 18px;
  }
}

Webpack 配了 postcss-nested 就能跑，但 Vite 这样写直接构建失败，说语法不合法。Vite 默认不支持嵌套吗？需要怎么配才能和 Webpack 行为一致？

我来解答 赞 12 收藏
二维码
手机扫码查看
反馈
2 条解答
乙豪
乙豪 Lv1
问题应该出在 Vite 默认配置上。Vite 本身不直接处理 CSS 嵌套语法，和 Webpack 需要通过 postcss-nested 插件来实现嵌套类似，Vite 也需要类似的插件支持。

要让 Vite 支持 CSS 嵌套，你需要安装并配置 unplugin-vue-components 和 postcss 这两个包。首先得装几个依赖：

npm install -D postcss postcss-nested unplugin-vue-components


然后在项目根目录创建或修改 postcss.config.js 文件，添加以下内容：

module.exports = {

  plugins: {

    'postcss-nested': {}

  }

}


这下应该就能正常解析你的嵌套样式了。记得重启开发服务器，不然配置可能不会生效。虽然配置有点麻烦，但至少比以前 webpack 那堆复杂配置要简单些。说实话每次换构建工具都要重新适应这些小差异，挺烦人的，不过习惯了就好。
点赞
2026-03-26 15:08
艺童的笔记
艺童的笔记 Lv1
切换到 Vite 后遇到 CSS 嵌套的问题，确实会有点懵。Vite 默认情况下是不支持 CSS 嵌套的，所以你需要额外安装一些插件来实现这个功能。

解决这个问题，你需要安装 vite-plugin-cssnest 或者用 postcss-nested 结合 postcss 来处理。不过 Vite 官方推荐用 postcss-nested，因为它是 PostCSS 的一部分，兼容性更好。

首先，你需要安装 postcss 和 postcss-nested，可以通过 npm 或 yarn 来安装：

npm install postcss postcss-nested --save-dev


或者

yarn add postcss postcss-nested --dev


然后，在你的项目根目录下创建一个 postcss.config.js 文件，如果没有的话。在这个文件里添加 postcss-nested 插件的配置：

module.exports = {

  plugins: {

    'postcss-nested': {}

  }

}


配置完这些，你就可以继续用你在 Webpack 里习惯的 CSS 嵌套写法了。Vite 会通过 PostCSS 处理这些嵌套的 CSS，和之前的效果应该是一样的。记得重启一下你的开发服务器，让配置生效。
点赞
2026-03-23 13:03
相关推荐
元素
元素
工具
博客
问答
登录/注册