Vue3项目中通过SCSS自定义Bootstrap5样式不生效的求助

我正在开发一个Vue 3应用，想要使用Bootstrap 5作为CSS框架，同时希望通过覆盖变量来定制样式。我跟着网上的几篇教程操作了，但显然哪里出了问题——我的变量覆盖完全没有生效。以下是我目前的操作步骤：

1. 安装依赖 #

在项目目录中执行了安装命令：

npm i bootstrap @popperjs/core

已经成功将Bootstrap安装为项目依赖。

2. 创建自定义SCSS文件 #

参考教程创建了custom.scss文件，用于导入Bootstrap的SCSS文件并覆盖变量，文件内容如下：

// Custom.scss
// Option B: Include parts of Bootstrap
// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import "../../../node_modules/bootstrap/scss/functions";

// 2. Include any default variable overrides here
$text-bg-primary: limegreen !default; // 我添加的变量覆盖

// 3. Include remainder of required Bootstrap stylesheets
@import "../../../node_modules/bootstrap/scss/variables";
@import "../../../node_modules/bootstrap/scss/variables-dark";

// 4. Include any default map overrides here
// All you need are in bootstrap documentation

// 5. Include remainder of required parts
@import "../../../node_modules/bootstrap/scss/maps";
@import "../../../node_modules/bootstrap/scss/mixins";
@import "../../../node_modules/bootstrap/scss/root";

// 6. Optionally include any other parts as needed
@import "../../../node_modules/bootstrap/scss/accordion";
@import "../../../node_modules/bootstrap/scss/alert";
@import "../../../node_modules/bootstrap/scss/badge";
@import "../../../node_modules/bootstrap/scss/breadcrumb";
@import "../../../node_modules/bootstrap/scss/button-group";
@import "../../../node_modules/bootstrap/scss/buttons";
@import "../../../node_modules/bootstrap/scss/card";
@import "../../../node_modules/bootstrap/scss/carousel";
@import "../../../node_modules/bootstrap/scss/close";
@import "../../../node_modules/bootstrap/scss/containers";
@import "../../../node_modules/bootstrap/scss/dropdown";
@import "../../../node_modules/bootstrap/scss/forms";
@import "../../../node_modules/bootstrap/scss/functions";
@import "../../../node_modules/bootstrap/scss/grid";
@import "../../../node_modules/bootstrap/scss/helpers";
@import "../../../node_modules/bootstrap/scss/images";
@import "../../../node_modules/bootstrap/scss/list-group";
@import "../../../node_modules/bootstrap/scss/mixins";
@import "../../../node_modules/bootstrap/scss/modal";
@import "../../../node_modules/bootstrap/scss/nav";
@import "../../../node_modules/bootstrap/scss/navbar";
@import "../../../node_modules/bootstrap/scss/offcanvas";
@import "../../../node_modules/bootstrap/scss/pagination";
@import "../../../node_modules/bootstrap/scss/placeholders";
@import "../../../node_modules/bootstrap/scss/popover";
@import "../../../node_modules/bootstrap/scss/progress";
@import "../../../node_modules/bootstrap/scss/reboot";
@import "../../../node_modules/bootstrap/scss/spinners";
@import "../../../node_modules/bootstrap/scss/tables";
@import "../../../node_modules/bootstrap/scss/toasts";
@import "../../../node_modules/bootstrap/scss/tooltip";
@import "../../../node_modules/bootstrap/scss/transitions";
@import "../../../node_modules/bootstrap/scss/type";
@import "../../../node_modules/bootstrap/scss/utilities";

// 7. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
@import "../../../node_modules/bootstrap/scss/utilities/api";

// 8. Add additional custom code here

3. 尝试变量覆盖 #

我在custom.scss的对应位置（步骤2的注释处）添加了变量覆盖代码：

$text-bg-primary: limegreen !default;

原本期望页面中<p class="text-bg-primary">Hello, world!</p>这段代码能显示石灰绿的背景，但实际仍然是Bootstrap默认的蓝色背景。

4. 项目中的导入配置 #

在main.ts中我导入了Bootstrap的JS、默认CSS以及我的自定义SCSS文件：

import "bootstrap/dist/js/bootstrap";
import "bootstrap/dist/css/bootstrap.css";
import "@/assets/sass/custom.scss";

已尝试的排查操作 #

• 执行npm run serve重启了应用
• 调整过$text-bg-primary在custom.scss中的位置

但以上操作都没有解决问题，变量覆盖依旧不生效。我肯定是哪里犯了一个简单的错误，希望能得到大家的建议！

内容来源于stack exchange