Как правильно переопределить _variables в Bootstrap 4.3.1?

Я использую Bootstrap 4.3.1 в своем проекте angular 8. В основном я хочу (изменить/переопределить) некоторые переменные начальной загрузки по умолчанию. Например, $font-size-base

Я пробовал код ниже, но он вообще не работает, пожалуйста, предложите мне, как правильно (настроить/изменить/переопределить) переменные scss начальной загрузки в проекте angular.

угловой.json

"styles": [
          "node_modules/bootstrap/dist/css/bootstrap.min.css",
          "src/scss/style.scss"
        ],

style.scss

@import "../../node_modules/bootstrap/scss/_functions";
@import "../../node_modules/bootstrap/scss/_variables";
@import "../../node_modules/bootstrap/scss/mixins";
$font-size-base: 0.655rem;

package.json

"@ng-bootstrap/ng-bootstrap": "^5.1.2",
"bootstrap": "^4.3.1",

По-прежнему отображается размер шрифта по умолчанию при запуске углового проекта.


angular angular8 bootstrap-4 ng-bootstrap angular-bootstrap
person Ahmer Ali Ahsan    schedule 15.11.2019    source источник
comment
Если вы используете сгенерированный загрузочный css-файл, вы больше не сможете настраивать переменные scss. Вам нужно использовать scss, чтобы сгенерировать загрузочный css на основе значений ваших переменных. В документации объясняется, как настроить переменные: getbootstrap.com/docs/4.3 /начало работы/тематика/   -  person JB Nizet    schedule 16.11.2019

Ответы (1)


arrow_upward
1
arrow_downward

Ответ на мой вопрос упоминается в комментарии @JB Nizet.

Я публикую этот ответ, чтобы показать маленькие шаги для будущих разработчиков, которые хотят узнать практический ответ на мой вопрос.

Если вы используете Angular 8 с Bootstrap ^ 4.3.1, тогда ваш узел стиля в файле angular.json должен выглядеть так:

"styles": [
   //"node_modules/bootstrap/scss/bootstrap.scss",
   //"node_modules/bootstrap/dist/css/bootstrap.min.css",
   "src/scss/style.scss"
],

и ваш style.scss будет выглядеть так:

/* You can add global styles to this file, and also import other style files */
$font-size-base: 0.875rem;
@import "../../node_modules/bootstrap/scss/bootstrap";
person Ahmer Ali Ahsan    schedule 16.11.2019