Bootstrap SCSS 中的弃用警告

Question

我正在尝试通过仅将所需组件导入 bootstrap sass 的

style.scss

文件来创建自定义引导程序。但是，当我导入和编译 3 个必需的组件时，我得到了一连串的弃用警告。

SCSS：

@import "./bootstrap-4.3.1/scss/functions";
@import "./bootstrap-4.3.1/scss/variables";
@import "./bootstrap-4.3.1/scss/mixins";

控制台警告（第一个）：

Deprecation Warning: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($spacer, 2)

More info and automated migrator: https://sass-lang.com/d/slash-div

    ╷
298 │ $headings-margin-bottom:      $spacer / 2 !default;
    │                               ^^^^^^^^^^^
    ╵
    bootstrap-4.3.1\scss\_variables.scss 298:31  @import
    style.scss 3:9                               root stylesheet

我正在使用以下版本的工具：

Bootstrap：

4.3.1

，Sass：

1.33.0 compiled with dart2js 2.13.0

使用这个版本组合有什么问题，或者其他问题吗？我该如何解决？

Answer 1

我在这里找到了解决方案

本质上，我的理解是新版本的

SASS

正在抛出警告。您可以降级您的版本以暂时停止警告，这样做也不应该破坏任何东西。

tl:dr 你应该使用

Sass: "1.32.13"

代替。

Answer 2

如果你想隐藏这个问题的警告 您可以从 Sass-lang

查看 sass 选项

并为您的 sass 添加最佳选项

就我而言，我有这个问题

弃用警告：在 calc() 之外使用 / 进行除法已弃用，并将在 Dart Sass 2.0.0. 中删除

所以我在我的 sass 中添加了“quietDeps”选项

 .pipe(sass({
            outputStyle: 'compressed',
            quietDeps: true
    }).on('error', sass.logError))  

再次运行我的任务后工作正常

Answer 3

您可以使用 sass-migrator 来修复除法问题，它可以用 math.div 替换所有位置 / 并且还包括 @use "sass:math";

https://sass-lang.com/documentation/cli/migrator

Answer 4

使用引导程序

version 4.6.1 or 4.6.2 or 5.2.0

编辑：

从 bootstrap 4.6.1 他们更新到

math.div()

函数而不是

/

作为分隔符。

例子

$headings-margin-bottom: $spacer / 2;

成为

$headings-margin-bottom: math.div($spacer, 2);