title: overriding default $border-radius-lg variable in theming bootstrap 4
body: <p>I am using the bootstrap 4 framework for my project.</p>
  
  <p>I'm theming by overriding core variables. If I adjust my grid variables, they work, but if I try and update the <code>$border-radius-lg</code> var, no changes happen, and the default <code>$border-radius-lg</code> size is still being used.</p>
  
  <p>This is where custom variables are placed...</p>
  
  <pre><code>@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";
  </code></pre>
  
  <p>These are my custom vars in <code>myvars</code> file</p>
  
  <pre><code>/* 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;
  </code></pre>
  
  <p>I checked the bootstrap <code>variables</code> file and <code>$border-radius-lg</code> is the parent variable of <code>$input-border-radius-lg</code> but after my css is compiled the radius is still the default size <code>.3rem</code></p>
  
  <p>Does anyone know how to get the this working?</p>
  
  <p>Here is a screenshot of the default vars...</p>
  
  <p><a href="https://i.stack.imgur.com/2TnvT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2TnvT.png" alt="enter image description here"></a></p>