Solución:
Tengo el mismo problema con todos los componentes en su propia carpeta
projects/<prj>/src/app/navbar/navbar.scss:
y he arreglado la adición temporal manualmente
@import '~bootstrap/scss/functions';
@import '~bootstrap/scss/variables';
@import '~bootstrap/scss/mixins';
Sé con certeza que eso no es hermoso, pero resuélvelo …
Versiones de mis paquetes a continuación
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
En lugar de importar todo el bootstrap nuevamente, en realidad solo desea el archivo mixins y el archivo de variables:
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
Estos archivos no tienen CSS real en ellos, solo variables SCSS y mixins.
Hay dos formas de hacer esto. Básicamente, ambas formas son iguales, solo que son diferentes en sintaxis. Entonces, en la parte superior de su archivo SCSS, use la siguiente línea:
@import "~bootstrap/scss/bootstrap-grid.scss";
O
@import "../../node_modules/bootstrap/scss/bootstrap-grid.scss";
Aquí tienes un ejemplo completo:
main.scss
@import "~bootstrap/scss/bootstrap-grid.scss
.test {
background-color: yellow;
}
@include media-breakpoint-up(md) {
.test {
background-color: red;
}
}
Código HTML:
<div class="test">
This div should have yellow background on mobile and red background in medium devices and up.
</div>
NOTA: Esto supone que ya tiene Bootstrap en su lista de dependencias en package.json expediente. De lo contrario, puede agregar la siguiente línea y puede cambiar la versión de Bootstrap como mejor le parezca.
"bootstrap": "4.1.3"