I am using vue3 over vite and I am trying to implement the bootstrap to the project I was able to implement the whole thing but when I try overriding the variables related to the bootstrap I get a huge error can someone help me?
Internal server error: [sass] $n: Invalid index 1 for a list with 0 elements. ╷ 7 │ @if type-of($values) == "string" or type-of(nth($values, 1)) != "list" { │ ^^^^^^^^^^^^^^^ ╵ node_modules.pnpm\bootstrap@5.3.2_@popperjs+core@2.11.8\node_modules\bootstrap\scss\mixins_utilities.scss 7:47 generate-utility() node_modules.pnpm\bootstrap@5.3.2_@popperjs+core@2.11.8\node_modules\bootstrap\scss\utilities_api.scss 13:9 @content node_modules.pnpm\bootstrap@5.3.2_@popperjs+core@2.11.8\node_modules\bootstrap\scss\mixins_breakpoints.scss 68:5 media-breakpoint-up() node_modules.pnpm\bootstrap@5.3.2_@popperjs+core@2.11.8\node_modules\bootstrap\scss\utilities_api.scss 5:3 @import node_modules.pnpm\bootstrap@5.3.2_@popperjs+core@2.11.8\node_modules\bootstrap\scss\bootstrap.scss 51:9 @import src\assets\style.scss 3:9 root stylesheet Plugin: vite:css File: D:\job\VAC Project shared with Weblink-20221101T145841Z-001\vac_dashboard_user\node_modules.pnpm\bootstrap@5.3.2_@popperjs+core@2.11.8\node_modules\bootstrap\scss\mixins_utilities.scss:7:47 Error: $n: Invalid index 1 for a list with 0 elements. ╷ 7 │ @if type-of($values) == "string" or type-of(nth($values, 1)) != "list" { │ ^^^^^^^^^^^^^^^ ╵ node_modules.pnpm\bootstrap@5.3.2_@popperjs+core@2.11.8\node_modules\bootstrap\scss\mixins_utilities.scss 7:47
generate-utility() node_modules.pnpm\bootstrap@5.3.2_@popperjs+core@2.11.8\node_modules\bootstrap\scss\utilities_api.scss 13:9
@content node_modules.pnpm\bootstrap@5.3.2_@popperjs+core@2.11.8\node_modules\bootstrap\scss\mixins_breakpoints.scss 68:5
media-breakpoint-up() node_modules.pnpm\bootstrap@5.3.2_@popperjs+core@2.11.8\node_modules\bootstrap\scss\utilities_api.scss 5:3
@import node_modules.pnpm\bootstrap@5.3.2_@popperjs+core@2.11.8\node_modules\bootstrap\scss\bootstrap.scss 51:9
@import src\assets\style.scss 3:9
root stylesheet at Object.wrapException (D:\job\VAC Project shared with Weblink-20221101T145841Z-001\vac_dashboard_user\node_modul les.pnpm\sass@1.69.7\node_modules\sass\sass.dart.js:2107:43) at SassList0.sassIndexToListIndex$2 (D:\job\VAC Project shared with Weblink-20221101T145841Z-001\vac_dashboard_use er\node_modules.pnpm\sass@1.69.7\node_modules\sass\sass.dart.js:115361:17) at _nth_closure0.call$1 (D:\job\VAC Project shared with Weblink-20221101T145841Z-001\vac_dashboard_user\node_modul les.pnpm\sass@1.69.7\node_modules\sass\sass.dart.js:101930:37) at _EvaluateVisitor__runBuiltInCallable_closure9.call$0 (D:\job\VAC Project shared with Weblink-20221101T145841Z-0 001\vac_dashboard_user\node_modules.pnpm\sass@1.69.7\node_modules\sass\sass.dart.js:88716:35) at D:\job\VAC Project shared with Weblink-20221101T145841Z-001\vac_dashboard_user\node_modules.pnpm\sass@1.69.7\n src\assets\style.scss 3:9 root stylesheet at Object.wrapException (D:\job\VAC Project shared with Weblink-20221101T145841Z-001\vac_dashboard_user\node_modules.pnpm\sass@1.69.7\node_modules\sass\sass.dart.js:2107:43) at SassList0.sassIndexToListIndex$2 (D:\job\VAC Project shared with Weblink-20221101T145841Z-001\vac_dashboard_user\node_modules.pnpm\sass@1.69.7\node_modules\sass\sass.dart.js:115361:17) at _nth_closure0.call$1 (D:\job\VAC Project shared with Weblink-20221101T145841Z-001\vac_dashboard_user\node_modules.pnpm\sass@1.69.7\node_modules\sass\sass.dart.js:101930:37) at _EvaluateVisitor__runBuiltInCallable_closure9.call$0 (D:\job\VAC Project shared with Weblink-20221101T145841Z-001\vac_dashboard_user\node_modules.pnpm\sass@1.69.7\node_modules\sass\sass.dart.js:88716:35) at D:\job\VAC Project shared with Weblink-20221101T145841Z-001\vac_dashboard_user\node_modules.pnpm\sass@1.69.7\node_modules\sass\sass.dart.js:85689:29 at _wrapJsFunctionForAsync_closure.$protected (D:\job\VAC Project shared with Weblink-20221101T145841Z-001\vac_dashboard_user\node_modules.pnpm\sass@1.69.7\node_modules\sass\sass.dart.js:4887:15) at _wrapJsFunctionForAsync_closure.call$2 (D:\job\VAC Project shared with Weblink-20221101T145841Z-001\vac_dashboard_user\node_modules.pnpm\sass@1.69.7\node_modules\sass\sass.dart.js:33983:12) at Object._asyncStartSync (D:\job\VAC Project shared with Weblink-20221101T145841Z-001\vac_dashboard_user\node_modules.pnpm\sass@1.69.7\node_modules\sass\sass.dart.js:4851:20) at _EvaluateVisitor2._addExceptionSpanAsync$body$_EvaluateVisitor0 (D:\job\VAC Project shared with Weblink-20221101T145841Z-001\vac_dashboard_user\node_modules.pnpm\sass@1.69.7\node_modules\sass\sass.dart.js:85733:16) at _EvaluateVisitor2._async_evaluate0$_addExceptionSpanAsync$1$3$addStackFrame (D:\job\VAC Project shared with Weblink-20221101T145841Z-001\vac_dashboard_user\node_modules.pnpm\sass@1.69.7\node_modules\sass\sass.dart.js:85670:19)
My SCSS code:
@import "./scss/_variables.scss";
@import "bootstrap/scss/bootstrap";
@import "./fonts/Lato-font/latofonts";
@import "./scss/custom_styles.scss";
@import "./custom/css/dark.scss";
@import "./custom/css/components/datepicker.scss";
@import "./custom/css/components/timepicker.scss";
@import "./custom/css/components/daterangepicker.scss";
@import "./custom/css/components/bs-filestyle.css";
@import "./component";This is my style.scss file no matter what I do it always give me the same error can someone help please?
I figured out my problem it turned out that when I copied the variables file data from the bootstrap I copied the arrays without its data.
The arrays are:
$theme-colors:(
"primary": $primary,
"secondary": $secondary,
"secondary2": $secondary2,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
) !default;
$colors: (
"blue": $blue,
"indigo": $indigo,
"purple": $purple,
"pink": $pink,
"red": $red,
"orange": $orange,
"yellow": $yellow,
"green": $green,
"teal": $teal,
"cyan": $cyan,
"black": $black,
"white": $white,
"gray": $gray-600,
"gray-dark": $gray-800
) !default;
$grays: (
"100": $gray-100,
"200": $gray-200,
"300": $gray-300,
"400": $gray-400,
"500": $gray-500,
"600": $gray-600,
"700": $gray-700,
"800": $gray-800,
"900": $gray-900
) !default;