如何使用 sass 自定义 bootstrap 4 ?

新手上路,请多包涵

我是直接在 scss 目录中新建了一个 style.scss 文件,引用目录如图:

图片描述

想使用自定义的 custom-variables.scss 样式覆盖默认的 variables.scss,请问引入顺序应该是怎样的?我尝试自定义了一些边距和按钮的文字大小等,会冲突呢?

现在如图的引入顺序,custom-variables.scss 代码如下(按钮默认边距),而且可以生效:

$input-btn-padding-y:         .25rem !default;
$input-btn-padding-x:         1rem !default;

custom-buttons.scss 代码如下(默认文字大小)无效

.btn {
  @include button-size($btn-padding-y, $btn-padding-x, $font-size-base * .9375, $btn-line-height, $btn-border-radius);
  
  &:focus,
  &.focus {
    box-shadow: $btn-focus-box-shadow;
  }
}

归根结底,应该如何不修改默认的 bootstrap sass 文件,使用自定义的 sass 文件来自定义 bootstrap 4.0.0 正式版?

阅读 3.2k
1 个回答
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进