I tried using a mixin in my styles.scss but it says it is not defined. I've tried:
@include media-breakpoint-up(sm) {
.some-class {
display: block;
}
}
result:
@include media-breakpoint-up(sm) {
^
No mixin named media-breakpoint-up
importing bootstrap again:
@import "../node_modules/bootstrap/scss/bootstrap.scss";
Now it works but bootstrap is included twice if I look in styles.bundle.js. Bootstrap is already included in angular-cli.json.
I've the same problem with all components in theirs own folder
projects/<prj>/src/app/navbar/navbar.scss
:
and I've fixed temporary adding manually
@import '~bootstrap/scss/functions';
@import '~bootstrap/scss/variables';
@import '~bootstrap/scss/mixins';
I know for sure that isn't beautiful but resolve it ...
My packages versions below
Angular CLI: 7.0.6
Node: 9.10.1
OS: darwin x64
Angular: 7.0.4
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router
Package Version
------------------------------------------------------------
@angular-devkit/architect 0.10.6
@angular-devkit/build-angular 0.10.6
@angular-devkit/build-ng-packagr 0.10.7
@angular-devkit/build-optimizer 0.10.6
@angular-devkit/build-webpack 0.10.6
@angular-devkit/core 7.0.6
@angular-devkit/schematics 7.0.6
@angular/cli 7.0.6
@angular/fire 5.1.0
@ngtools/json-schema 1.1.0
@ngtools/webpack 7.0.6
@schematics/angular 7.0.6
@schematics/update 0.10.6
ng-packagr 4.4.5
rxjs 6.3.3
typescript 3.1.6
webpack 4.19.1