css - 如何在 angular2 单个组件中访问全局 SASS mixin 函数？

Question

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

我有全局 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;
    }
  }
}

我正在尝试在 component.scss 中访问此 mixin 函数，例如

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

运行它时显示错误

Answer 1

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

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'] }, } ] }