css - 从 Bootstrap 4 breadcrumb - Sass 中删除 border-radius

Question

在 Bootstrap 4 中有一个名为 $enable-rounded 的 Sass 变量

"Enables predefined border-radius styles on various components."

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

我需要移除 Breadcrumb component 上的圆 Angular ，但我不想将其从任何其他组件中删除。因此我不能使用 $enable-rounded 来做我需要的事情。

但是，我不知道执行此操作的最佳方法是什么。

_breadcrumb.scss 的 Sass 包含以下内容:

.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);
}

如何在不修改 _breadcrumb.scss 的情况下覆盖 @include border-radius($border-radius);？

我的应用程序的所有 CSS 都压缩到 1 个文件 (app.css)，该文件是从 Sass 文件 (app.scss) 构建的，该文件首先包含相关的 Bootstrap 4 Sass 文件。所以我可以做这样的事情:

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


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

这似乎与 Bootstrap 3 有点太相似了，您必须覆盖您不想要的内容。

使用 Sass for Bootstrap 4 有更聪明的方法吗？

Answer 1

我认为对于您只需要没有 border-radius 的面包屑并且所有其他组件仍然有它的特定情况，您唯一的解决方案就是按照您在问题中提到的那样做:

.breadcrumb {
border-radius: 0;
}

This seems a bit too similar to Bootstrap 3 where you had to override what you didn't want.

我个人看不到任何其他解决方案，只是因为您不想编辑原始 _breadcrumb.scss