Как модифицировать миксины Bootstrap 4 без редактирования основных файлов - PullRequest
Новая
       38

Как модифицировать миксины Bootstrap 4 без редактирования основных файлов

0 голосов
/ 01 июня 2019

В общем, я пытаюсь изменить вариант кнопки mixin в начальной загрузке 4. Основной файл, в котором находится код для этого, - bootstrap \ scss \ mixins, а имя файла - _buttons.scss.В моем файле custom.scss у меня есть следующий код: 

@import "../../node_modules/bootstrap/scss/bootstrap";

Я бы хотел оставить имя миксина таким же, а не переопределять его другим именем, поскольку оно используется в файле node_modules \ bootstrap \scss_buttons.scss в следующем коде, который генерирует все кнопки на основе доступных цветов: 

@each $color, $value in $theme-colors {
.btn-#{$color} {
@include button-variant($value, $value);
}
}

Что происходит, когда новый модифицированный код миксина добавляется ниже импорта начальной загрузки в custom.scss, он не имеетлюбой эффект, так как импортированный начальный загрузчик компилируется после этого кода, а кнопка css по умолчанию компилируется.Принимая во внимание, что, когда модифицированный миксин-код добавляется после импорта начальной загрузки в custom.scss, происходит дублирование кнопок в скомпилированном файле .css.

Как можно изменить код в миксине без редактирования файлов начальной загрузки ядра?

1 Ответ

0 голосов
/ 01 июня 2019

Вы должны импортировать файлы SCSS Bootstrap отдельно, а не весь пакет, и вы должны импортировать свои собственные миксины после _mixins.scss Bootstrap.Таким образом, вы можете переопределить их, прежде чем Bootstrap _buttons.scss будет использовать их: 

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";

@import "my-custom-mixins";

// rest of Bootstrap imports (see bootstrap.scss):
@import "bootstrap/scss/root";
@import "bootstrap/scss/reboot";
@import "bootstrap/scss/type";
@import "bootstrap/scss/images";
@import "bootstrap/scss/code";
@import "bootstrap/scss/grid";
@import "bootstrap/scss/tables";
@import "bootstrap/scss/forms";
@import "bootstrap/scss/buttons";
@import "my-custom-buttons";
@import "bootstrap/scss/transitions";
@import "bootstrap/scss/dropdown";
@import "bootstrap/scss/button-group";
@import "bootstrap/scss/input-group";
@import "bootstrap/scss/custom-forms";
@import "bootstrap/scss/nav";
@import "bootstrap/scss/navbar";
@import "bootstrap/scss/card";
@import "bootstrap/scss/breadcrumb";
@import "bootstrap/scss/pagination";
@import "bootstrap/scss/badge";
@import "bootstrap/scss/jumbotron";
@import "bootstrap/scss/alert";
@import "bootstrap/scss/progress";
@import "bootstrap/scss/media";
@import "bootstrap/scss/list-group";
@import "bootstrap/scss/close";
@import "bootstrap/scss/toasts";
@import "bootstrap/scss/modal";
@import "bootstrap/scss/tooltip";
@import "bootstrap/scss/popover";
@import "bootstrap/scss/carousel";
@import "bootstrap/scss/spinners";
@import "bootstrap/scss/utilities";
@import "bootstrap/scss/print";
...