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

【问题标题】：How to access global SASS mixin function in angular2 individual component?如何在 angular2 单个组件中访问全局 SASS mixin 函数？
【发布时间】：2017-02-06 00:31:36
【问题描述】：

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

运行时显示错误

【问题讨论】：

你有我的问题吗？
@import component.scss 在style.scss respond-to 定义之后。
@MaheswaranS。你找到这个问题的答案了吗。有同样的要求！！
@bhavya_w。还没找到。

标签： css angular sass scss-lint

【解决方案1】：

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

【讨论】：

【解决方案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'] }, } ] }

【讨论】：