Ionic 4 - как создавать собственные миксины SCSS

Question

Я создал собственный миксин таким образом:

@mixin donut-chart($name, $perc, $size, $width, $base, $center, $color, $textColor: $color, $textSize: 40px) {

  $color2: $color;
  $base2: $base;
  $deg: ($perc/100*360)+deg;
  $deg1: 90deg;
  $deg2: $deg;

  @if $perc < 50 {
    $base: $color;
    $color: $base2;
    $color2: $base2;
    $deg1: ($perc/100*360+90)+deg;
    $deg2: 0deg;
  }

  .donut-chart {
    &#{$name} {
      width: $size;
      height: $size;
      background: $base;

      .slice {
        &.one {
          clip: rect(0 $size $size/2 0);
          -webkit-transform: rotate($deg1);
          transform: rotate($deg1);
          background: $color;
        }

        &.two {
          clip: rect(0 $size/2 $size 0);
          -webkit-transform: rotate($deg2);
          transform: rotate($deg2);
          background: $color2;
        }
      }

      .chart-center {
        top: $width;
        left: $width;
        width: $size - ($width * 2);
        height: $size - ($width * 2);
        background: $center;

        span {
          font-size: $textSize;
          line-height: $size - ($width * 2);
          color: $textColor;
          &:after {
            content: '#{$perc}%';
          }
        }
      }
    }
  }
}

Он отлично работает следующим образом:

@include donut-chart('.chart1', 75, 70px, 5px, #CCC, #999, #666, #333, 10);

Так что он работает ТОЛЬКО, если я поместил миксин на тот же SCSSфайл как @include.

Есть ли способ поместить миксин во внешний файл, чтобы я мог использовать его во многих местах?

Я пробовал с @import в темеПапка, файл variables.scss и файл globals.scss, но он всегда показывает эту ошибку:

[ng] @include donut-chart('.chart1', 75, 70px, 5px, #CCC, #999, #666, #333, 10);
[ng]         ^
[ng]       No mixin named donut-chart

Answer 1

Вы должны импортировать файл, в котором находится миксин, в файл, в который вы его вызываете, через @include.

Итак, что-то вроде ...

@import "../mixins/donut-chart.scss";

@include donut-chart('.chart1', 75, 70px, 5px, #CCC, #999, #666, #333, 10);