Почему все мои экспортированные scss отображаются при импорте только одного файла?

Question

Я делаю экспорт в мои переменные файлы scss _colors.scss, _breakpoints.scss ect ...

экспорт выглядит так

@mixin export-map($map, $name: '', $stringify: false) {
  :export {
    @each $key, $value in $map {
      @if $value != null {
        @if ($stringify) {
           #{$key}: #{inspect($value)};
        } @else if (str-length($name) > 0) {
           #{$name}-#{$key}: #{$value};
        } @else {
          #{$key}: #{$value};
        }
      }
    }
  }
 }

используется как это

// _breakpoints.scss

@import '../mixins/export-map';

$breakpoints: (
  to-small:                                   ( max-width:  766px ),
  small:                                      ( min-width:  767px ),
  to-medium:                                  ( max-width:  991px ),
  medium:                                     ( min-width:  992px ),
  to-large:                                   ( min-width: 1199px ),
  large:                                      ( min-width: 1200px ),
  to-x-large:                                 ( min-width: 1599px ),
  x-large:                                    ( min-width: 1600px )
);

@include export-map($breakpoints, '', true);

Поэтому я хочу импортировать _colors.scss для использования в моих скриптах. Так что это проект Vue, и я делаю это так.

import colors from '@/assets/styles/variables/_colors.scss'

при этом console.log(colors) напечатает все экспортированные переменные, доступные в проекте, цвета, точки останова, измерения и т. д ...

Вопрос: Кто-нибудь знает, почему это так? Я явно импортирую цвета.