sass map-get не может получить значение переменной, объявленной в другом файле

Question

У меня есть файл _config.scss, в котором я определил все переменные, включая значения для цветов, следующим образом:

$colors     :(  black   : black,
                1       : #161616,
                2       : #2b2b2b,
                3       : #404040,
                4       : #555555,
                5       : #6a6a6a,
                6       : #7F7F7F,
                7       : #949494,
                8       : #bebebe,
                9       : #e1e1e1,
                10      : #f2f2f2,
                11      : #fafafa,
                white   : white,
                primary : #007AFF,
                info    : #5AC8FA,
                success : #4CD964,
                warning : #FF9500,
                danger  : #FF3B30) !default;

Я импортирую этот файл в свой файл app.scss через @import 'config', оба эти файлы находятся в одной папке. Затем в другом файле, который также включен в файл app.s css, который я буду использовать sh для использования переменной цвета

//////////// Colors ////////////
.background-black-30{
    background-color: rgba(map-get($colors, black), 0.3);
}

При всех вызовах map-get в исходном коде я получаю та же ошибка при компиляции ресурсов

ERROR in ./resources/sass/app.scss
Module build failed (from ./node_modules/css-loader/index.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/lib/loader.js):

    background-color: rgba(map-get($colors, black), 0.3);
                     ^
      $color: null is not a color.
    background-color: rgba(map-get($colors, black), 0.3);

обновление

Так что это интересно, ошибка для строки 19 в _ bootstrap .scs

Module build failed (from ./node_modules/css-loader/index.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/lib/loader.js):

        color: darken(map-get($colors, 'primary'), 10%);
              ^
      $color: null is not a color.
        color: darken(map-get($colors, 'primary'), 10%);
               ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  resources/sass/components/_bootstrap.scss 19:16  @import
  resources/sass/_components.scss 1:9              @import
  stdin 20:9                                       root stylesheet

в этом файле, я использую ключи перед строкой 19, но кажется, что она компилируется без ошибок

/////////////////////////////////////////
// Global general styles
/////////////////////////////////////////
body{
    position: relative;
    min-height: 100%;
}

* {outline: none !important;}

img{
    max-width: 100%;
}

a{
    color: map-get($colors, 'primary');
    transition: $transition;
    &:hover, &:focus{
        color: darken(map-get($colors, 'primary'), 10%); 
        text-decoration-color: currentColor;
    }
}

, поэтому строка color: map-get($colors, 'primary'); не выбрасывается ошибка, но color: darken(map-get($colors, 'primary'), 10%); делает.