title: Angular 6 define global scss heading styles - Bootstrap
body: <p>I am trying to overwrite and define global heading styles for my Angular 6 application. If I do something like this in the <strong>styles.scss</strong> file, it works!</p>
  
  <pre><code>$h1-font-size: 50px;
  </code></pre>
  
  <p>but when I try to define $h1-font-size based on a screen size(media queries) it doesn't show the right font size, I have something like this ATM:</p>
  
  <p>// screen size breakpoints</p>
  
  <pre><code>$grid-breakpoints: (
    xs: 0,
    sm: 576px,
    md: 768px,
    lg: 992px,
    xl: 1200px
  );
  
  // media queries xs, md and lg
  @media only screen and (min-width: map-get($grid-breakpoints, xs)) {
      $h1-font-size: 12px;
  }
  
  @media only screen and (min-width: map-get($grid-breakpoints, md)) {
      $h1-font-size: 18px;
  }
  
  @media only screen and (min-width: map-get($grid-breakpoints, lg)) {
      $h1-font-size: 50px;
  }
  </code></pre>
  
  <p>angular.json:</p>
  
  <pre><code>  "styles": [
                "node_modules/bootstrap/dist/css/bootstrap-reboot.css",
                "node_modules/bootstrap/dist/css/bootstrap-grid.css",
                "src/styles.scss",
                ...
              ],
  </code></pre>
  
  <p>bootstrap-scss._variables.scss file:<a href="https://github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss#L239" rel="nofollow noreferrer">scss file</a></p>
  
  <pre><code>$h1-font-size:                $font-size-base * 2.5 !default;
  $h2-font-size:                $font-size-base * 2 !default;
  $h3-font-size:                $font-size-base * 1.75 !default;
  $h4-font-size:                $font-size-base * 1.5 !default;
  $h5-font-size:                $font-size-base * 1.25 !default;
  $h6-font-size:                $font-size-base !default;
  </code></pre>
  
  <p>styles.scss file:</p>
  
  <pre><code>/* You can add global styles to this file, and also import other style files */
  
  @import '~bootstrap/scss/bootstrap-reboot';
  @import '~bootstrap/scss/bootstrap-grid';
  // Required
  @import "~node_modules/bootstrap/scss/bootstrap";
  
  /* Set global default font family */
  $font-family-base: 'Source Sans Pro',
  sans-serif;
  body,
  html {
      font-family: $font-family-base
  }
  
  $grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px);
  @media only screen and (min-width: map-get($grid-breakpoints, xs)) {
      $h1-font-size: 12px;
  }
  
  @media only screen and (min-width: map-get($grid-breakpoints, md)) {
      $h1-font-size: 12px;
  }
  
  @media only screen and (min-width: map-get($grid-breakpoints, lg)) {
      $h1-font-size: 50px;
  }
  </code></pre>
  
  <p>Is it even possible? What's the best practice to overwrite boostrap-scss headings based on the screen size?</p>
  
  <p>Link to the stackblitz example - <a href="https://stackblitz.com/edit/angular-scss-global-headings" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-scss-global-headings</a></p>