Question

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

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

我的应用程序的所有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 有点相似，在Bootstrap中，您必须覆盖不需要的内容。

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

Answer 1

我认为对于您只希望没有边界半径的面包屑而所有其他组件仍然具有面包屑的特定情况，您唯一的解决方案就是像您在问题中提到的那样做：

.breadcrumb { border-radius: 0; }

这似乎与Bootstrap 3类似，在Bootstrap 3中，您必须覆盖不需要的内容。

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

Answer 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;（以及以后要更改的任何其他默认值）。

接下来，之前导入您的引导脚本的新文件。在您的示例中，这将是您的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。

从Bootstrap 4面包屑-Sass中移除边界半径

2 个答案: