How to access global SASS mixin function in angular2 individual component?

Question

i have a common SCSS mixin function in global SCSS file. but i could not able to access that mixin function inside the angular2 components.

i have global style.scss which have following mixin function

@mixin respond-to($breakpoint) {
  @if $breakpoint == "small" {
    @media (max-width: 767px) {
      @content;
    }
  }
  @else if $breakpoint == "medium" {
    @media (min-width: 992px) {
      @content;
    }
  }
  @else if $breakpoint == "large" {
    @media (min-width: 1200px) {
      @content;
    }
  }
}

i am trying to access this mixin function in component.scss like

.procard{
width:50%;
 @include respond-to(small){ 
  .pro-card{
    width: 100%;
    .pro-box{
      max-width: 320px;
      margin:0 auto;
     }
   }
 } 
}

While running this it show error

`@import` `component.scss` in `style.scss` after `respond-to` definition. — 3rdthemagical, Sep 28 '16 at 13:33
@MaheswaranS. Did you found a answer to this question. Have the same requirement!! — bhavya_w, Oct 17 '16 at 10:54

score 0 · Answer 1 · edited Dec 16 '16 at 14:00

0

You need to Import the Mixin lib into all your component .scss files, where you want to use them. phpStorm will still say, that he cant find this mixin, but compiler will find it.

edited Dec 16 '16 at 14:00

Ricardo Rocha

14,612
20
74
130

answered Dec 16 '16 at 12:25

Budi

678
2
6
27

score 0 · Answer 2 · answered Aug 17 '17 at 03:37

you can explicitly import the global scss. OR a better way is to use the sass-resources-loader which helps you using shared scss among components without having to explicit importing them. Something like:

{ test: /\.scss$/, loader: ["raw-loader", "sass-loader", { loader: 'sass-resources-loader', options: { resources: ['./styles/global/_vars.scss', './styles/global/_mixins.scss'] }, } ] }

How to access global SASS mixin function in angular2 individual component?

2 Answers2