Как получить доступ к глобальной функции микширования SASS в отдельном компоненте angular2?

У меня есть общая функция микширования SCSS в глобальном файле SCSS. но я не смог получить доступ к этой функции mixin внутри компонентов angular2.

У меня есть global style.scss, у которого есть следующая функция mixin

@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;
    }
  }
}

я пытаюсь получить доступ к этой функции mixin в component.scss, например

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

При запуске это показывает ошибку

введите описание изображения здесь


angular css sass scss-lint
person Maheswaran S    schedule 28.09.2016    source источник
comment
ты получил мой вопрос?   -  person Maheswaran S    schedule 28.09.2016
comment
@import component.scss в style.scss после respond-to определения.   -  person 3rdthemagical    schedule 28.09.2016
comment
@MaheswaranS. Вы нашли ответ на этот вопрос. Есть такое же требование !!   -  person bhavya_w    schedule 17.10.2016
comment
@bhavya_w. Еще не нашел.   -  person Maheswaran S    schedule 09.12.2016

Ответы (2)


arrow_upward
0
arrow_downward

Вам необходимо импортировать Mixin lib во все .scss файлы ваших компонентов, где вы хотите их использовать. phpStorm все равно скажет, что он не может найти это mixin, но компилятор найдет его.

person Budi    schedule 16.12.2016

arrow_upward
0
arrow_downward

вы можете явно импортировать глобальный файл scss. ИЛИ лучше использовать sass-resources-loader, который поможет вам использовать общий scss для компонентов без необходимости их явного импорта. Что-то типа:

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

person LeOn - Han Li    schedule 17.08.2017