Vue3+Vite项目中Bootstrap变量覆盖报错求助

API 探路者

2026-7-2

解决Bootstrap变量覆盖导致的Sass索引错误

我在基于Vite构建的Vue3项目中集成Bootstrap，基础集成完成后，尝试覆盖Bootstrap相关变量时触发严重内部服务器错误，错误信息为[sass] $n: Invalid index 1 for a list with 0 elements，完整报错栈如下：

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)

我的style.scss代码如下：

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

解决方案

检查自定义变量文件_variables.scss，确保所有覆盖Bootstrap变量的语法正确，尤其是工具类相关变量（如$utilities），不能设置为空列表或错误格式。Bootstrap的generate-utility mixin会遍历工具类列表，空列表会触发索引越界。
确认自定义变量文件中未误删或修改Bootstrap依赖的核心列表型变量（如$spacers、$breakpoints），必须保持正确的列表结构，不能设为null或空值。
若新增自定义工具类，严格遵循Bootstrap工具类API格式定义，示例：

$utilities: map-merge(
  $utilities,
  (
    "custom-property": (
      property: custom-property,
      values: (1, 2, 3)
    )
  )
);

临时注释_variables.scss中的内容，逐步恢复变量，定位具体导致错误的变量并排查格式问题。

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

Vue3+Vite项目中Bootstrap变量覆盖报错求助

解决方案 #

解决方案