vue 和 vite 项目上 bootstrap 5 导入错误

Question

这是我在终端上遇到的错误

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";

这是我的 vue 项目的

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");

Answer 1

嘿嘿，

Sass 现在不赞成在 abs() 函数中使用百分比（https://sass-lang.com/documentation/writing-changes/abs-percent/），Bootstrap 仍在做的事情。在您使用的最新版本的 sass (1.65) 中，它现在在编译时显示警告。虽然它不应该破坏您的应用程序并且您可以接受它，但据我所知，您必须通过三种方法来消除该警告：

• 等待下一个版本的bootstrap，因为问题仍然存在（https://github.com/twbs/bootstrap/issues/39028）；
• 将 sass 编译器降级到以前的版本（例如 1.64.2）
• 按照 (https://github.com/twbs/bootstrap/issues/39028#issuecomment-1676720186)中的建议修改引导程序

为了简单起见，我建议您将 sass 降级到 1.64.2 版本，直到修复此问题的新版本 Bootstrap 出现。