Custom Bootstrap 4 breakpoint not seen in component-level styles in Angular CLI app

Question

I am having problems declaring the scss styles using Bootstrap's media-breakpoint-up mixin after adding a new breakpoint to $grid-breakpoints.

While the d-{infix}-{display} classes come out right and the section with them works just fine, the component-level scss styles are not seeing the new breakpoint, despite imports.

My questions is - am I doing something wrong here? like order of imports for instance?

Angular CLI app with these two dependencies:

"bootstrap": "^4.1.3",
"ngx-bootstrap": "^3.0.1",

styles.scss

@import 'scss/my.variables';
@import 'scss/my.theme';
@import 'scss/bootstrap.partials';

my.variables.scss (nothing of importance)

$brand-primary:#00a651
$fixed-header-min-height: 70px;    
$box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1);
$box-shadow-hover: 0 4px 12px 0 rgba(0, 0, 0, 0.3);

my.theme.scss

$font-family-sans-serif:  proxima-nova, Helvetica, Arial, sans-serif;
$font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace;
$font-family-base:        $font-family-sans-serif;
$font-weight-normal:      200;
$font-weight-base:        $font-weight-normal;
$body-bg:                 #fff;

bootstrap.partials.scss

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1600px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1540px
);

// Bootstrap partial imports to keep the bloat away
@import '~bootstrap/scss/functions';
@import '~bootstrap/scss/variables';
@import '~bootstrap/scss/mixins';
@import '~bootstrap/scss/reboot';
@import '~bootstrap/scss/type';
@import '~bootstrap/scss/images';
@import '~bootstrap/scss/grid';
@import '~bootstrap/scss/utilities';
@import '~bootstrap/scss/buttons';
@import '~bootstrap/scss/transitions';
@import '~bootstrap/scss/modal';
@import '~bootstrap/scss/close';
@import '~bootstrap/scss/nav';
@import '~bootstrap/scss/navbar';

app.components.html

<h1>Custom breakpoint - xxl introduced (1600px)</h1>

<h2>media queries (media-breakpoint-up et al.)</h2>
<div class="main">
  <p>
    this text should be blue, but red above xxl
  </p>

  <small>
    This Text Should All Be Lowercase, but Uppercase above xxl
  </small>
</div>

<h2>d-* classes</h2>

<p class="d-block">Visible always</p>
<p class="d-none d-lg-block">Visible above lg</p>
<p class="d-none d-xxl-block">Visible above xxl</p>

app.component.scss

@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import '~bootstrap/scss/mixins/_breakpoints';

.main {
  color: blue;
  @debug $grid-breakpoints;

  @include media-breakpoint-up(xxl) {
    /* I have also tried without repeating the selector */
    .main {
      color: red;
    }
  }

  small {
    text-transform: uppercase;
    @include media-breakpoint-up(xxl) {
      small {
        text-transform: lowercase;
      }
    }
  }
}

Output

DEBUG: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)        

No xxl.

Edit 1:

I created a custom wrapper mixin which confirmed the breakpoint is not found.

@mixin respond-above($breakpoint) {
  @if map-has-key($breakpoints, $breakpoint) {
    @include media-breakpoint-up($breakpoint){
      @content;
    }
  } @else {
    @warn 'Missing breakpoint: #{$breakpoint}.';
  }
}

Answer 1

I can think of two potential things it could be.

1) You are including bootstrap.partials'; in the global styles.scss, but if there are any variables or mixins defined there, they would be "compiled out" of the final global css, and would not be available in the component partials. Therefore, you may have to include it in your app.component.scss

2) What does your angular.json look like in the root directory? Try adding the path to the node_modules bootstrap directory to stylePreprocessorOptions.includePaths[] in angular.json.

{
    "projects": {
        "myProject": {
            "architect": {
                "build": {
                    "options": {
                        "stylePreprocessorOptions": {
                            "includePaths": [
                                "node_modules/bootstrap"
                            ]
                        },
                    }
                }
            }
        }
    }
}