Импортировать переменные sass в компонент gatsby

Я создаю проект статического сайта с использованием Gatsby. Я успешно установил плагин gatsby sass и заставил работать sass, однако мне не удалось правильно импортировать свой файл пользовательских переменных sass в другие файлы sass компонентов.

Ниже представлена ​​моя структура папок:

`--src
  -components
   -header
    -header.js
    -header.sass
 --layouts
  -index.js
  -index.sass
 --pages
  -page1.js
  -page1.sass
 --sass
  -_color.sass
  -_global.sass
  -_mixins.sass
  `

Как показано выше, я использую настраиваемую папку sass для хранения всех глобальных переменных и стилей, а затем импортирую их в каждый компонент sass, который в них нуждается (я понимаю, что это может быть не обычный подход, но я все еще новичок to react и gatsby, и еще не совсем знаком с другими методами, такими как компонент css). Например, если мне нужно получить доступ к цветовым переменным внутри page1.sass, я бы импортировал файл sass цвета в page1.sass и определил там конкретный стиль компонента. Проблема в том, что при этом я получаю ошибку «Неопределенная переменная». Я проверил свой путь импорта, и все кажется правильным, я не мог понять, что пошло не так. Самое странное, что импорт миксинов вроде работает нормально. Эта проблема кажется уникальной при импорте переменных sass. я что-то упускаю?