如何在angular2单个组件中访问全局SASS混入功能？

Question

我在全局SCSS文件中有一个常用的SCSS混入函数。但是我无法访问angular2组件中的mixin函数。

我有一个全局style.scss，它有如下的混合函数

​

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

​

我正在尝试访问component.scss中的这个混合函数，如下所示

​

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

​

运行此命令时，会显示错误

​

​

Answer 1

您需要将Mixin lib导入到要使用它们的所有组件.scss文件中。phpStorm仍然会说，他找不到这个mixin，但是编译器会找到它。

Answer 2

您可以显式导入全局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'] }, } ] }