使用 Vite 编译 scss 时，如何抑制全局 abs（） 函数的 Bootstrap 5.3.1 弃用警告？

问：

在使用 Vite 和 npm 编译 Bootstrap 5.3.1 scss 时，我试图抑制 for。Deprecation Warningglobal abs() function

我正在使用节点 v16.20.2 和 npm 8.19.4，因为这是我的 macOS 系统允许我安装的最高节点版本。但是，即使我使用的是过时的 node @16 版本，我仍然能够使用最新的 npm sass、vite 和 bootstrap 包。

在下面查看我的完整配置...package.json

{
  "private": true,
  "scripts": {
    "dev": "vite",
    "watch": "npm run dev",
    "build": "vite build",
    "production": "vite build"
  },
  "devDependencies": {
    "laravel-vite-plugin": "^0.8.0",
    "sass": "1.66.1",
    "vite": "^4.4.9"
  },
  "dependencies": {
    "bootstrap": "^5.3.1"
  }
}

这是我的，如果有人想在上面安装这个 npm 包后进行测试......vite.config.js

import {defineConfig} from "vite";
import laravel from 'laravel-vite-plugin';

export default defineConfig(() => ({
    base: '',
    build: {
        emptyOutDir: true,
        manifest: true,
        outDir: 'build',
        assetsDir: 'assets'
    },
    plugins: [
        laravel({
            publicDirectory: 'build',
            input: [
                'resources/scss/theme.scss'
            ],
            refresh: [
                '**.php'
            ]
        })
    ],
    resolve: {
        alias: [
            {
                find: /~(.+)/,
                replacement: process.cwd() + '/node_modules/$1'
            },
        ]
    }
}));

这是我下面的代码，摘自 Bootstrap 5.3 自定义 SASS 文档...theme.scssOption A

// Option A: Include all of Bootstrap
@import "../node_modules/bootstrap/scss/bootstrap";

在 Bootstrap 5.3 自定义 SASS 文档中使用选项 B 时，我还收到以下相同的弃用警告。

好的，当我使用上面的 npm 和 Vite 配置编译时，这是在完整的 Vite 日志中输出的......theme.scssDeprecation Warning

10:47:58 PM [vite] hmr update /resources/scss/theme.scss?direct (x8)
Deprecation Warning: Passing percentage units to the global abs() function is deprecated.
In the future, this will emit a CSS abs() function to be resolved by the browser.
To preserve current behavior: math.abs(100%)
To emit a CSS abs() now: abs(#{100%})
More info: https://sass-lang.com/d/abs-percent

   ╷
57 │   $dividend: abs($dividend);
   │              ^^^^^^^^^^^^^^
   ╵
    node_modules/bootstrap/scss/vendor/_rfs.scss 57:14         divide()
    node_modules/bootstrap/scss/mixins/_grid.scss 59:12        row-cols()
    node_modules/bootstrap/scss/mixins/_grid.scss 85:13        @content
    node_modules/bootstrap/scss/mixins/_breakpoints.scss 68:5  media-breakpoint-up()
    node_modules/bootstrap/scss/mixins/_grid.scss 72:5         make-grid-columns()
    node_modules/bootstrap/scss/_grid.scss 38:3                @import
    node_modules/bootstrap/scss/bootstrap.scss 20:9            @import
    resources/scss/theme.scss 2:9                              root stylesheet

我尝试使用如下所示的 sass 变量来抑制警告，该变量位于我的 ，但这并不能抑制......？theme.scssDeprecation Warning

// Suppress Sass deprecation warning
$deprecation-warning-threshold: false;

// Option A: Include all of Bootstrap
@import "../node_modules/bootstrap/scss/bootstrap";

我发现这个相关问题发布在官方 Bootstrap github 存储库上......

• https://github.com/twbs/bootstrap/issues/39028

但是从我在这个问题页面中可以看出，人们建议手动更改目录中的代码......node_modules

1. 在文件中，添加到顶部：node_modules/bootstrap/scss/vendor/_rfs.scss@use 'sass:math';
2. 在行错误中，将： 替换为$dividend: abs($dividend);$dividend: math.abs($dividend);

我宁愿不这样做，因为我没有将目录提交到我的项目存储库。node_modules

在编译和热替换模块时，有没有其他可能的方法可以从我的 Vite 日志中抑制这一点？Deprecation Warningtheme.scssnpm run buildnpm run dev

任何想法将不胜感激，谢谢！