VUE3问题： 提示[sass] Expected newline

当使用VUE3中的sass的时候，经常会有新手遇到这个问题：<style scoped> 提示[sass] Expected newline，这个问题很简单的。我们来一起了解下。比如我们有一段代码：

<style lang="sass" scoped>
  .wrapper{
    max-width: 1200px;
    margin:0 auto
  }
</style>

如果你是这样写话，肯定会报错，你只有把lang="scss"就可以正常了，为什么呢？我们来简单说明下。

这个错误是因为 Sass/SCSS 语法中要求属性定义需要遵循特定的缩进格式。在 Sass 中，选择器的花括号后面应该换行，并且属性需要缩进。

以下是几种正确的写法：

方案1：SCSS 语法（推荐）

<style scoped>
.wrapper {
  max-width: 1200px;
  margin: 0 auto;
}
</style>

方案2：Sass 缩进语法（需要去掉花括号）

<style scoped>
.wrapper
  max-width: 1200px
  margin: 0 auto
</style>

主要原因：

• 如果你使用 lang="sass"，需要遵循 Sass 的缩进语法（没有花括号和分号）

• 如果你使用 lang="scss"，需要遵循 SCSS 语法（有花括号和分号）

推荐方案：
大多数 Vue 项目使用 lang="scss"，因为它更接近原生 CSS 语法，更容易上手。

好啦，就这样了，大家学会了吗？