Bootstrap 4 in Angular CLI

Question

I am trying to set up using the Bootstrap 4 scss file in my Angular 4 CLI project.

Following the guidelines here and here, I have set up angular-cli.json like so (designsystem.scss is my main scss file):

 "styles": [
    "sass/designsystem/designsystem.scss",
    "../node_modules/prismjs/themes/prism.css",
    "styles.scss"
  ],

and then, in that file:

@import 'variables';
@import '../../node_modules/bootstrap/scss/bootstrap';

and in "_variables.scss" I have pasted the contents of the default Bootstrap 4 "_variables.scss" and removed all the !defaults.

So far, I have overridden nothing. But CLI keeps choking on the "variables" file, looking for mixins, such as

./src/sass/designsystem/designsystem.scss
Module build failed: ModuleBuildError: Module build failed: 
@include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
    ^
  No mixin named -assert-ascending

Backtrace:
  src/sass/designsystem/_variables.scss:190

If I comment out my @import 'variables';, the base bootstrap scss processed and loads without error.

So, how do I create my customized version of _variables.scss?

update:

Even if I comment out the mixins, the build fails on all the color functions:

$btn-focus-box-shadow:           0 0 0 3px rgba(theme-color("primary"), .25);
                                      ^
  Argument `$color` of `rgba($color, $alpha)` must be a color

Answer 1

Looks like I need to also import Bootstrap functions before variables:

@import '../../../node_modules/bootstrap/scss/functions';
@import 'variables';
@import '../../node_modules/bootstrap/scss/bootstrap';

Several of the variables use functions, notably theme-color()

Answer 2

Add these imports before your _variables import in your sass/designsystem/designsystem.scss file.

@import "../../node_modules/bootstrap/scss/functions";
@import "../../node_modules/bootstrap/scss/bootstrap";

Answer 3

I believe you are encountering problems because you are using functions and mixins in your custom variables.scss file that haven't been declared yet.

You can solve these problems by just overriding the variables and not the derived the rest of the file.

Using Bootstrap@4.0.0Beta:

$white:  #fff;
$gray-100: #f8f9fa;
$gray-200: #e9ecef;
$gray-300: #dee2e6;
$gray-400: #ced4da;
$gray-500: #adb5bd;
$gray-600: #868e96;
$gray-700: #495057;
$gray-800: #343a40;
$gray-900: #212529;
$black:  #000;

$grays: (
        100: $gray-100,
        200: $gray-200,
        300: $gray-300,
        400: $gray-400,
        500: $gray-500,
        600: $gray-600,
        700: $gray-700,
        800: $gray-800,
        900: $gray-900
);

$blue:    #007bff;
$indigo:  #6610f2;
$purple:  #6f42c1;
$pink:    #e83e8c;
$red:     #dc3545;
$orange:  #fd7e14;
$yellow:  #ffc107;
$green:   #28a745;
$teal:    #20c997;
$cyan:    #17a2b8;

$colors: (
        blue: darkblue, //change a default color
        indigo: $indigo,
        purple: $purple,
        pink: $pink,
        red: $red,
        orange: $orange,
        yellow: $yellow,
        green: $green,
        teal: $teal,
        cyan: $cyan,
        white: $white,
        gray: $gray-600,
        gray-dark: $gray-800
);

$theme-colors: (
        smurf: #0fa8d6, //add your own custom theme
        primary: $blue,
        secondary: $gray-600,
        success: $green,
        info: $cyan,
        warning: $yellow,
        danger: $red,
        light: $gray-100,
        dark: $gray-800
);

Note that these are JUST variables, nothing more. Now just import variables.scss before bootstrap and you are good to go:

@import 'variables';
@import '../../node_modules/bootstrap/scss/bootstrap';

Answer 4

you don't have to import variables as its already done in bootstrap.scss. Just do the following and you will be good to go:

// overriding bootstraps browser default to 14px instead of 16px
$font-size-base: .875rem;
$font-size-lg: 1rem;
$font-size-sm: .75rem;

@import '../../../../node_modules/bootstrap/scss/bootstrap';

.font-lg{
    font-size:$font-size-lg;
}

.font-md {
    font-size: $font-size-base;
}

.font-sm {
    font-size: $font-size-sm;
}