我试图在编译Bootstrap 5.3.1 scss时使用Vite和npm来抑制global abs() function的Deprecation Warning。

• 我使用node 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"
  }
}

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

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'
            },
        ]
    }
}));

下面是我的theme.scss代码，它取自Bootstrap 5.3 Customize SASS文档中的Option A。

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

• 在Bootstrap 5.3 Customize SASS docs中使用Option B时，我也得到了下面相同的Deprecated Warning。*

好了，当我使用上面的npm和Vite配置编译我的theme.scss时，这是完整的Vite日志中输出的Deprecation 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.scss的顶部，但这并不能抑制Deprecation Warning.？

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

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

我在官方Bootstrap github repo上发现了这个相关问题。

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

但是从我在这个问题页面上看到的，人们建议手动更改node_modules目录中的代码。
1.在node_modules/bootstrap/scss/vendor/_rfs.scss文件中，添加到顶部：@use 'sass:math';
1.在行错误中，替换：$dividend: abs($dividend);至$dividend: math.abs($dividend);
我宁愿不这样做，因为我没有提交node_modules目录到我的项目存储库。
在使用npm run build和npm run dev热替换模块编译theme.scss时，是否有其他可能的方法从我的Vite日志中抑制此Deprecation Warning？
任何想法将不胜感激，谢谢！