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

Question

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

\n

Deprecation Warning: Passing percentage units to the global abs() function is deprecated.\nIn the future, this will emit a CSS abs() function to be resolved by the browser.        \nTo preserve current behavior: math.abs(100%)\nTo emit a CSS abs() now: abs(#{100%})\nMore info: https://sass-lang.com/d/abs-percent\n\n  \xe2\x95\xb7\n1 \xe2\x94\x82 @import "../../node_modules/bootstrap/scss/bootstrap";\n  \xe2\x94\x82 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\n  \xe2\x95\xb5\n    resources\\scss\\app.scss 1:1                                divide()\n    node_modules\\bootstrap\\scss\\mixins\\_grid.scss 59:12        row-cols()\n    node_modules\\bootstrap\\scss\\mixins\\_grid.scss 85:13        @content\n    node_modules\\bootstrap\\scss\\mixins\\_breakpoints.scss 68:5  media-breakpoint-up()     \n    node_modules\\bootstrap\\scss\\mixins\\_grid.scss 72:5         make-grid-columns()       \n    node_modules\\bootstrap\\scss\\_grid.scss 38:3                @import\n    node_modules\\bootstrap\\scss\\bootstrap.scss 20:9            @import\n    resources\\scss\\app.scss 1:9                                root stylesheet\n    \n

\n

这是我的package.json

\n

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

\n

这是我的vite.config.js

\n

import { defineConfig } from "vite";\nimport laravel from "laravel-vite-plugin";\nimport vue from "@vitejs/plugin-vue";\nimport { fileURLToPath } from "url";\n\nexport default defineConfig({\n    plugins: [\n        vue(),\n        laravel({\n            input: ["resources/css/app.css", "resources/js/app.js"],\n            refresh: true,\n        }),\n    ],\n    resolve: {\n        alias: {\n            "@": fileURLToPath(new URL("./resources/js", import.meta.url)),\n        },\n    },\n});\n

\n

这就是我导入引导程序的方式app.scss文件中的引导程序的方式

\n

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

\n

这是我的app.jsvue 项目文件

\n

import { createApp } from "vue";\nimport "../scss/app.scss";\nimport * as bootstrap from "bootstrap";\nimport App from "./App.vue";\n\nconst app = createApp(App);\n\napp.mount("#app");\n

\n

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 出现。