CODEWITHSUNDEEP
angular7angular-bootstrap
user2024080
user2024080

Reputation: 5099

Boostrap - responsive approch with angular7 requires clarity

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?

Upvotes: 0

Views: 259

Answers (1)

Albena Kertova
Albena Kertova

Reputation: 151

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.

Upvotes: 1

Related Questions