如何在Vite编译Bootstrap 5.3.1 SCSS时屏蔽全局abs()弃用警告

问题背景 #

使用node v16.20.2、npm 8.19.4环境，配合最新版sass、vite、bootstrap包，通过Vite编译Bootstrap 5.3.1的SCSS文件时，频繁触发全局abs()函数的弃用警告。尝试在theme.scss顶部添加$deprecation-warning-threshold: false;无效，且不想直接修改node_modules目录下的代码（该目录不提交到仓库）。

相关配置如下：

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 #

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 #

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

编译警告日志 #

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%})

   ╷
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

解决方案 #

方法1：配置Vite的Sass选项过滤特定警告 #

在vite.config.js中添加Sass的规则配置，精准过滤该弃用警告：

修改vite.config.js，新增css字段：

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

export default defineConfig(() => ({
    base: '',
    build: {
        emptyOutDir: true,
        manifest: true,
        outDir: 'build',
        assetsDir: 'assets'
    },
    // 新增CSS预处理器配置
    css: {
        preprocessorOptions: {
            sass: {
                warnRule: {
                    // 匹配目标警告文本，设置为忽略
                    'Passing percentage units to the global abs() function is deprecated': 'ignore'
                }
            }
        }
    },
    plugins: [
        laravel({
            publicDirectory: 'build',
            input: [
                'resources/scss/theme.scss'
            ],
            refresh: [
                '**.php'
            ]
        })
    ],
    resolve: {
        alias: [
            {
                find: /~(.+)/,
                replacement: process.cwd() + '/node_modules/$1'
            },
        ]
    }
}));

方法2：使用patch-package持久化修复依赖代码 #

如果方法1无效，可通过patch-package给Bootstrap打补丁，修改记录会保存在项目中，无需提交node_modules：

1. 安装patch-package作为开发依赖：

npm install patch-package --save-dev

2. 在package.json的scripts中添加自动应用补丁的钩子：

"scripts": {
  "dev": "vite",
  "watch": "npm run dev",
  "build": "vite build",
  "production": "vite build",
  "postinstall": "patch-package"
}

3. 修改node_modules/bootstrap/scss/vendor/_rfs.scss第57行，将abs($dividend)替换为math.abs($dividend)：

// 原代码
$dividend: abs($dividend);
// 修改后
$dividend: math.abs($dividend);

4. 生成补丁文件：

npx patch-package bootstrap

执行后项目根目录会生成patches/bootstrap+5.3.1.patch文件，将该文件提交到仓库。后续执行npm install时，patch-package会自动应用补丁。

方法3：升级Bootstrap到修复版本 #

Bootstrap 5.3.2及以上版本已修复该abs()函数的弃用警告问题，直接升级即可：

npm update bootstrap

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