Prettier 格式化 CSS 时为什么把我的嵌套规则搞乱了？

ლ郭云提问于 2026-03-11 15:37:19 阅读 6

前端

我最近在项目里配置了 Prettier，但发现它格式化 CSS 的时候，会把我在 SCSS 里写的嵌套规则直接打平，导致样式失效。明明 .prettierrc 里也没改什么特殊配置，就是默认设置。这到底是 Prettier 不支持嵌套，还是我哪里配错了？

比如下面这段 SCSS 代码，保存后就被 Prettier 改成一行，完全没法用了：

.container {
  display: flex;
  .item {
    margin: 10px;
  }
}

我来解答赞 2 收藏

反馈

1 条解答

设计师冰杰 Lv1

这事儿吧，不是你配错了，是 Prettier 本身就压根不支持 SCSS 嵌套语法。

Prettier 处理 .scss 文件时，它其实是把它当作标准 CSS 来对待的。SCSS 的嵌套写法（.container { .item { ... } }）在 Prettier 看来是无效语法，它可不管你是不是嵌套，一股脑给你打平成单层。

想解决这个问题，有几个思路：

最省心的办法是用 stylelint 配合 Prettier 一起用。stylelint 支持 SCSS 语法，而且有 --fix 选项能帮你格式化。安装 stylelint 和 stylelint-config-recommended-scss，然后在 package.json 里把 Prettier 放在最后一步执行，stylelint 先处理 SCSS 特有的语法。

如果你就想用 Prettier，那可以在项目根目录的 .prettierignore 里加上 *.scss，让 Prettier 跳过 SCSS 文件。缺点是你得自己手动格式化这些文件，或者用 IDE 的内置格式化。

还有一种方案是把 SCSS 编译成标准 CSS 后再让 Prettier 处理，不过这就有点绕了。

我个人推荐第一种方案，stylelint 配合 Prettier 一起上，两者各管各的，stylelint 负责 SCSS 特有的语法规则，Prettier 负责统一代码风格。

2026-03-11 16:00