代码之家  ›  专栏  ›  技术社区  ›  joshmoto

在主题化引导4中覆盖默认$border radius lg变量

  •  1
  • joshmoto  · 技术社区  · 7 年前

    我正在为我的项目使用Bootstrap4框架。

    我通过覆盖核心变量来创建主题。如果我调整网格变量,它们会工作,但是如果我尝试更新 $border-radius-lg var,则不会发生任何更改,默认值为 $border radius lg 尺寸仍在使用中。

    这是放置自定义变量的位置。。。

    @import "scss/functions";
    @import "scss/variables";
    
    // my custom variables
    @import "myvars";
    
    @import "scss/mixins";
    @import "scss/root";
    @import "scss/reboot";
    @import "scss/type";
    @import "scss/images";
    @import "scss/code";
    @import "scss/grid";
    @import "scss/tables";
    @import "scss/forms";
    @import "scss/buttons";
    @import "scss/transitions";
    @import "scss/dropdown";
    @import "scss/button-group";
    @import "scss/input-group";
    @import "scss/custom-forms";
    @import "scss/nav";
    @import "scss/navbar";
    @import "scss/card";
    @import "scss/breadcrumb";
    @import "scss/pagination";
    @import "scss/badge";
    @import "scss/jumbotron";
    @import "scss/alert";
    @import "scss/progress";
    @import "scss/media";
    @import "scss/list-group";
    @import "scss/close";
    @import "scss/toasts";
    @import "scss/modal";
    @import "scss/tooltip";
    @import "scss/popover";
    @import "scss/carousel";
    @import "scss/spinners";
    @import "scss/utilities";
    @import "scss/print";
    

    这些是我的定制变量 myvars

    /* my custom bootstrap 4 vars
    -------------------------------------------------- */
    
    // these work fine when I make changes to test
    $grid-columns:                12;
    $grid-gutter-width:           30px;
    
    // this doesn't change any of my large input radius
    $border-radius-lg:            1rem;
    

    我检查了引导程序 variables 文件和 $border radius lg 是的父变量 $input-border-radius-lg .3rem

    有人知道如何让这个工作吗?

    enter image description here

    1 回复  |  直到 7 年前
        1
  •  2
  •   Carol Skelly    7 年前

    你应该进口 variables 之后

    // my custom variables
    @import "myvars";
    
    @import "scss/functions";
    @import "scss/variables";
    @import "scss/mixins";
    @import "scss/root";
    @import "scss/reboot";
    @import "scss/type";
    @import "scss/images";
    @import "scss/code";
    @import "scss/grid";
    @import "scss/tables";
    @import "scss/forms";
    @import "scss/buttons";
    @import "scss/transitions";
    @import "scss/dropdown";
    @import "scss/button-group";
    @import "scss/input-group";
    @import "scss/custom-forms";
    @import "scss/nav";
    @import "scss/navbar";
    @import "scss/card";
    @import "scss/breadcrumb";
    @import "scss/pagination";
    @import "scss/badge";
    @import "scss/jumbotron";
    @import "scss/alert";
    @import "scss/progress";
    @import "scss/media";
    @import "scss/list-group";
    @import "scss/close";
    @import "scss/toasts";
    @import "scss/modal";
    @import "scss/tooltip";
    @import "scss/popover";
    @import "scss/carousel";
    @import "scss/spinners";
    @import "scss/utilities";
    @import "scss/print";
    

    演示: https://www.codeply.com/go/2hEAbv49oQ


    How to extend/modify (customize) Bootstrap 4 with SASS

    推荐文章