Boostrap - responsive approch with angular7 requires clarity - angular7

Question

In my styles.scss i am importing the bootstrap variables, and did a testing it works.
#import '~bootstrap/scss/_functions.scss';
#import '~bootstrap/scss/_variables.scss';
#import '~bootstrap/scss/mixins/_breakpoints';
$grid-breakpoints: (
sm: 768px,
md: 768px,
lg: 1024px
);
$container-min-widths: (
sm: 768px,
md: 768px,
lg: 1024px
);
#import "~bootstrap/scss/bootstrap";
#include media-breakpoint-down (sm) {
body{
background: green;
}
}
#include media-breakpoint-between (md, lg) {
body{
background: blue;
}
}
#include media-breakpoint-up (lg) {
body{
background: gray;
}
}
But my question is, if i use the app.component.scss - still is it require to import all the variables again?
without import i tried, like:
#import '../../styles.scss'
#include media-breakpoint-down (sm) {
body{
background: green;
}
}
#include media-breakpoint-between (md, lg) {
body{
background: blue;
}
}
#include media-breakpoint-up (lg) {
body{
background: gray;
}
}
But got error like :
ERROR in ./src/app/app.component.scss
Module build failed (from ./node_modules/sass-loader/lib/loader.js):
#include media-breakpoint-down (sm) {
^
Media query expression must begin with '('
in D:\IBO\POC\ibo\src\app\app.component.scss (line 3, column 1)
i ｢wdm｣: Failed to compile.
can't we download all app specific requirement at once? or what is the correct approach?

Answer 1

This is how css encapsulation works in Angular, if you want to use SASS functions (like #include, #extend) in your scss with external #mixins or styles, you'll need to import these external files every time.
This is not a great practice though as it bubbles the amount of produced css in the final html page (every time you #import a file, it's whole content is copied). So a better approach would be to put some common styles in your styles.scss and use them through the whole app.
In your example I don't understand why you need to do the same in app.component.scss? Is it just for testing? You shouldn't need to - it should be enough putting common styles (like yours) in styles.scss and they should be applied to the whole application. Just make sure your style.scss is added to your angular.json file under the styles section. Something like:
"styles": [
"src/styles.scss"
]
Hope that helps.