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 !default
s.
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
Looks like I need to also import Bootstrap functions before variables:
Several of the variables use functions, notably
theme-color()