Vue 3 搭配 Sass 出现弃用警告：样式无法正常生效

问题根源 #

你遇到的警告是Sass从1.54.0版本开始引入的规则提示：嵌套选择器之后直接写属性的行为即将被修改为符合CSS标准的逻辑，当前你的写法已经导致Sass解析样式时出现异常，进而引发样式失效。

具体解决步骤 #

找到代码第37行（及项目中所有同类写法）的Sass代码，检查是否存在类似以下的结构：

.container {
  .title {
    font-weight: bold;
  }
  // 此处直接编写了属性，例如：
  padding: 20px;
}

针对这种写法，有两种修复方式：

方式1：保持原有样式行为 #

把嵌套选择器后面的属性移动到嵌套选择器的上方，和之前Sass的解析逻辑保持一致：

.container {
  padding: 20px; // 将属性移至嵌套选择器之前
  .title {
    font-weight: bold;
  }
}

方式2：适配Sass新行为 #

如果想提前适配未来的Sass规则，把嵌套选择器后面的属性用& {}包裹（&代表当前父选择器）：

.container {
  .title {
    font-weight: bold;
  }
  & {
    padding: 20px; // 属性包裹在&对应的父选择器块中
  }
}

额外说明 #

• 若不确定哪些文件存在这类写法，可以用编辑器的全局搜索功能，查找项目中所有嵌套选择器后直接跟属性声明的代码段。
• 重新安装依赖无法解决问题，因为这是Sass版本更新带来的语法规则变更，必须修改对应的Sass代码。

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