VUE 3: Настройка Bootstrap 5 через SCSS? ⇐ CSS

[Anonymous]

Я пишу приложение Vue 3 и хотел бы использовать Bootstrap 5 в качестве структуры CSS. Я хотел бы иметь возможность переопределить некоторые переменные для настройки. Я следил за несколькими учебниками, которые я нашел в Интернете, но явно что -то делаю не так, потому что я не вижу, чтобы мои переопределения переменной применялись. Вот что я сделал.

Код: Выделить всё

npm i bootstrap @popperjs/core
< /code>
, который установил начальную загрузку как зависимость.  На основе этого урока я создал файл с именем custom.scss 

для импорта файлов SCSS с начальной загрузкой переменных. Этот файл выглядит так: < /p>

Код: Выделить всё

// 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

// 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

Теперь я хочу настроить стиль и переопределить переменную Text-bg-primary . Для этого я добавил < /p>

Код: Выделить всё

$text-bg-primary: limegreen !default;

to file custom.scss . Я ожидаю, что этот код теперь будет иметь зеленый фон извести: < /p>

Код: Выделить всё

Hello, world!

Наконец, я импортировал все CSS Bootstrap и мою настройку в Main.ts :

Код: Выделить всё

import "bootstrap/dist/js/bootstrap";
import "bootstrap/dist/css/bootstrap.css";
import "@/assets/sass/custom.scss";
< /code>
Однако я все еще вижу текст с синим фоном по умолчанию.   Я перезапустил свое приложение, используя NPM запустить ARED 

. Я перемещался вокруг своего кода переопределения переменной в Custom.scss , позиционирование мышления может иметь какое -то отношение к этому. Ничто не рассмотрело проблему. Я уверен, что здесь что -то не так. Есть совет?

Подробнее здесь: https://stackoverflow.com/questions/796 ... 5-via-scss