I am trying to suppress a Deprecation Warning for global abs() function when compiling Bootstrap 5.3.1 scss using Vite with npm.

在使用VTE和NPM编译Bootstrap 5.3.1 SCSS时，我试图抑制全局abs()函数的弃用警告。

I am using node v16.20.2 and npm 8.19.4 because this is the highest node version which my macOS system will let me install. However, even though I am using an outdated version of node @16, I am still able to use the latest npm sass, vite and bootstrap packages.

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

See my full package.json config below...

请参见下面的完整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"
  }
}

Here is my vite.config.js if anyone wants to test after installing this npm package above...

如果任何人想在安装完上面的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'
            },
        ]
    }
}));

Here is my theme.scss code below, which is taken from Option A in Bootstrap 5.3 Customize SASS docs...

下面是我的heme.scss代码，摘自Bootstrap 5.3 Customize sass文档中的选项A。

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

I also get the same Deprecated Warning below when using Option B in Bootstrap 5.3 Customize SASS docs.

在使用Bootstrap 5.3 Customize sass文档中的选项B时，我也收到了下面相同的不推荐使用的警告。

Ok so when I compile my theme.scss using the npm and Vite configuration above, this is the Deprecation Warning outputted in the full Vite log...

好了，当我使用上面的npm和Vite配置编译我的theme.scss时，这是在完整的Vite日志中输出的弃用警告。

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

I've tried suppressing the warning using sass variable shown below, placed at the top of my theme.scss, but this doesn't suppress Deprecation Warning...?

我已经尝试使用如下所示的sass变量隐藏警告，该变量放置在我的heme.scss的顶部，但这不能隐藏弃用警告...？

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

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

I've found this related issue posted on the official Bootstrap github repo...

我在官方的Bootstrap GitHub上找到了这个相关的问题...

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

But from what I can make out in this issue page, people are suggesting manually changing code in the node_modules directory...

但从我在这个问题页面中看到的情况来看，人们建议手动更改node_MODULES目录中的代码……

1. In node_modules/bootstrap/scss/vendor/_rfs.scss file, add to top: @use 'sass:math';


2. In line error, replace: $dividend: abs($dividend); to $dividend: math.abs($dividend);

I would rather not do this as I am not committing the node_modules directory to my project repo.

我不想这样做，因为我不会将node_MODULES目录提交给我的项目repo。

Is there any other possible way to suppress this Deprecation Warning from my Vite log when compiling theme.scss with npm run build and npm run dev hot replacement module?

当使用npm run build和npm run dev热替换模块编译heme.scss时，有没有其他可能的方法来从我的VITE日志中抑制这个弃用警告？

Any ideas would be much appreciated, thanks!

如有任何建议，我们将不胜感激，谢谢！

Not the cleanest of solutions. But until this is fixed, if I downgrade my sass in my npm package to version ~1.64.2 the Deprecation Warning does not occur.

不是最干净的解决方案。但在这个问题得到解决之前，如果我将NPM包中的sass降级到版本~1.64.2，则不会出现弃用警告。

Using the tilde ~ symbol stops this version getting updated any further when running npm update for other packages.

在为其他程序包运行NPM更新时，使用代字号~可停止此版本的进一步更新。

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