从 Bootstrap 4 面包屑中删除边界半径 - Sass答案

【问题标题】：Remove border-radius from Bootstrap 4 breadcrumb - Sass从 Bootstrap 4 面包屑中删除边界半径 - Sass
【发布时间】：2020-06-08 23:07:49
【问题描述】：

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

“在各种组件上启用预定义的 border-radius 样式。”

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

我需要删除Breadcrumb component 上的圆角，但我不想从任何其他组件中删除它。因此我不能使用$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 有没有更聪明的方法来做到这一点？

【问题讨论】：

标签： css sass bootstrap-4

【解决方案1】：

我认为对于您只需要没有边框半径的面包屑并且所有其他组件仍然具有它的特定情况，您唯一的解决方案是像您在问题中提到的那样：

.breadcrumb { border-radius: 0; }

这似乎有点类似于 Bootstrap 3，你必须覆盖你不想要的东西。

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

【讨论】：

谢谢。我不想编辑_breadcrumb.scss，因为如果我更新 Bootstrap，我的更改将被覆盖。这就是问题所在。

【解决方案2】：

如果您查看 _variables.scss 文件，您可以看到所有使用 !default 设置的变量 - 将其视为首选项文件。编译 SCSS 时，您的新值将替换为默认值，而无需覆盖 CSS。

好像$breadcrumb-border-radius: $border-radius !default; 就是你想要的。

重置该值的两种方法：

1) 复制 _variables.scss 文件并将其放在您的项目目录中（我喜欢将名称更改为 _myvariables.scss ），查找该变量，删除!default 并将其更改为$breadcrumb-border-radius: 0; 或 2) 创建一个文件，比如 _myvariables.scss，其中包含 $breadcrumb-border-radius: 0;（以及您以后要更改的任何其他默认值）。

接下来，在您的引导程序 scss 之前导入该新文件。在您的示例中，这将是您的 app.scss 文件：

// app.scss
@import myvariables.scss;  //no underscore because it's a partial
@import // other_bootstrap_sass_files including the breadcrumb component

现在，当编译 SCSS 时，面包屑半径将设置为 0，而不更改任何其他内容或覆盖 css。

【讨论】：