vue.jssassvuejs3bootstrap-5bootstrap-vue

bootstrap 5 import error on vue and vite project

this is the error i am getting on my terminal

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

this is my 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"
    }
}

this is my 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)),
        },
    },
});

this is how i import bootstrap on app.scss file

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

this is my app.js file for vue project

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

  • Heelo,

    Sass is now deprecating the use of percent in the abs() function (https://sass-lang.com/documentation/breaking-changes/abs-percent/), something Bootstrap is still doing. In the latest version of sass (1.65) you are using, it now shows a warning at compilation. While it should not break your app and you could just live with it, you have to my knowledge three ways to get rid of that warning:

    For sake of simplicity, I suggest you to downgrade sass to the 1.64.2 version until a new version of Bootstrap that fixes this issue shows up.