Bootstrap 5.3.3 _type.scss用Gulp编译出现弃用警告，求解决

你当前使用Bootstrap 5.3.3配合Gulp编译Sass，每次保存修改都会触发Sass弃用警告，提示内容如下：

Deprecation Warning: Sass's behavior for declarations that appear after nested rules will be changing to match the behavior specified by CSS in an upcoming version. To keep the existing behavior, move the declaration above the nested rule. To opt into the new behavior, wrap the declaration in & {}

问题原因 #

该警告源于你的Sass代码（或修改的Bootstrap源码片段）中存在属性声明写在嵌套规则之后的情况，Sass未来版本会调整这类写法的解析逻辑，因此提前抛出警告。

解决方案 #

方案1：保留现有编译行为

找到触发警告的代码块，将嵌套规则之后的属性声明移到嵌套规则上方即可。

错误写法示例：

.card {
  .card-body {
    padding: 1rem;
  }
  // 嵌套规则后写属性，触发警告
  background-color: #fff;
}

修正后：

.card {
  background-color: #fff; // 属性移到嵌套规则前
  .card-body {
    padding: 1rem;
  }
}

方案2：适配Sass未来新行为

若想提前适配Sass的新解析逻辑，将嵌套规则后的属性声明包裹在& {}中（&代表当前父选择器）。

修改示例：

.card {
  .card-body {
    padding: 1rem;
  }
  & {
    background-color: #fff;
  }
}

若警告来自Bootstrap官方源码

如果警告并非出自你的自定义代码，而是Bootstrap本身的代码：

• 等待Bootstrap发布适配Sass新规则的版本（升级到更高版本的Bootstrap）
• 可临时在Gulp的Sass编译配置中忽略依赖警告（不推荐长期使用），示例配置：

const sass = require('gulp-sass')(require('sass'));

gulp.task('sass', function() {
  return gulp.src('src/scss/**/*.scss')
    .pipe(sass({
      quietDeps: true // 忽略依赖（如Bootstrap）的警告
    }).on('error', sass.logError))
    .pipe(gulp.dest('dist/css'));
});

内容的提问来源于stack exchange，提问作者Mitul Chhabhaya