Убрать радиус границы из начальной загрузки Bootstrap 4 - Sass

Question

В Bootstrap 4 есть Sass varaible под названием $enable-rounded, который

"Включает предопределенные стили border-radius для различных компонентов."

(https://getbootstrap.com/docs/4.1/getting-started/theming/#sass-options)

У меня есть требование удалить закругленные углы компонента Breadcrumb , но я не хочу удалять его из каких-либо других компонентов. Поэтому я не могу использовать $enable-rounded, чтобы делать то, что мне нужно.

Однако я не знаю, каков оптимальный способ сделать это.

Sass для _breadcrumb.scss содержит это:

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    padding: $breadcrumb-padding-y $breadcrumb-padding-x;
    margin-bottom: $breadcrumb-margin-bottom;
    list-style: none;
    background-color: $breadcrumb-bg;

    @include border-radius($border-radius);
}

Как мне переопределить @include border-radius($border-radius); без изменения _breadcrumb.scss?

Весь CSS для моего приложения сведен в 1 файл (app.css), который построен из файла Sass (app.scss), который сначала включает соответствующие файлы Sass Bootstrap 4. Так что я мог бы сделать что-то вроде этого:

// app.scss
@import breadcrumb;
@import // other_bootstrap_sass_files


// CSS specific to my app
.breadcrumb {
    border-radius: 0;
}

Это кажется слишком похожим на Bootstrap 3 , где вам пришлось переопределить то, что вы не хотели.

Есть ли более разумный способ сделать это с Sass для Bootstrap 4?

Answer 1

Я думаю, что для вашего конкретного случая, когда вам нужны только панировочные сухари без границы-радиуса, а у всех остальных компонентов он есть, ваше единственное решение делает то, что вы упомянули в своем вопросе:

.breadcrumb { border-radius: 0; }

Это выглядит слишком похоже на Bootstrap 3, где вам пришлось переопределить то, что вы не хотели.

Лично я не вижу другого решения, только потому, что вы не хотите редактировать оригинал _breadcrumb.scss