Vue+Vite项目导入Bootstrap 5时出现Sass弃用警告求助

问题现象 #

导入Bootstrap 5时终端出现如下弃用警告：

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

  ╷
1 │ @import "../../node_modules/bootstrap/scss/bootstrap";
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
    resources\scss\app.scss 1:1                                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\app.scss 1:9                                root stylesheet

项目配置与代码示例 #

package.json #

{
    "private": true,
    "type": "module",
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
    "devDependencies": {
        "axios": "^1.1.2",
        "laravel-vite-plugin": "^0.7.5",
        "sass": "^1.65.1",
        "vite": "^4.0.0"
    },
    "dependencies": {
        "@popperjs/core": "^2.11.8",
        "@vitejs/plugin-vue": "^4.2.3",
        "bootstrap": "^5.3.1",
        "vue": "^3.2.36",
        "vue-loader": "^17.0.1"
    }
}

vite.config.js #

import { defineConfig } from "vite";
import laravel from "laravel-vite-plugin";
import vue from "@vitejs/plugin-vue";
import { fileURLToPath } from "url";

export default defineConfig({
    plugins: [
        vue(),
        laravel({
            input: ["resources/css/app.css", "resources/js/app.js"],
            refresh: true,
        }),
    ],
    resolve: {
        alias: {
            "@": fileURLToPath(new URL("./resources/js", import.meta.url)),
        },
    },
});

app.scss导入Bootstrap方式 #

@import "../../node_modules/bootstrap/scss/bootstrap";

app.js文件 #

import { createApp } from "vue";
import "../scss/app.scss";
import * as bootstrap from "bootstrap";
import App from "./App.vue";

const app = createApp(App);

app.mount("#app");

解决方法 #

方法1：降级Sass版本 #

Sass 1.65.0开始弃用全局abs()处理百分比单位的方式，Bootstrap 5.3.1尚未适配，可将Sass降级到1.64.x版本规避警告：

npm install sass@~1.64.0 --save-dev

方法2：升级Bootstrap至适配版本 #

Bootstrap团队已在后续版本修复该问题，直接升级到最新稳定版即可：

npm update bootstrap

方法3：手动修改Bootstrap SCSS文件（不推荐） #

临时应急可修改node_modules/bootstrap/scss/mixins/_grid.scss第59行的代码，将全局abs()替换为math.abs()：

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

注意：此方式修改依赖包文件，后续执行npm install或更新Bootstrap时会被覆盖，仅作临时方案。

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