Переменные SASS не работают, когда импортируются только в главный файл

Question

У меня есть частичный файл sass, в котором содержатся миксины, к которым я хотел бы получить глобальный доступ.Насколько я понимаю, все, что вам нужно сделать, это @import этот файл в файл master.scss, и он должен быть доступен во всем мире.К сожалению, это не так для меня.Мне нужно импортировать файл переменной в каждый отдельный файл .scss, в котором я хочу его использовать. Что мне нужно сделать, чтобы импортировать его в файл master.scss, чтобы я мог получить доступ к своим миксинам по всему миру?

Это приложение rails с моим файлом master.scss, импортированным в файл application.scss.

Дерево моих активов

- scss
 -- utilities 
   -- _mixins.scss
 -- components
   -- buttons.scss
 master.scss

Содержимое моего файла master.scss

@import 'utilities/_mixins';
@import 'components/buttons';

Содержимое моего файла mixins.scss

@mixin square-size($size) {
  height: $size;
  width: $size;
}

Пример того, как я использую миксин в компонентах / buttons.scss:

  .square-button {
    @include square-size(40px);
}

Answer 1

Я не уверен на 100%, что это решит вашу проблему, но, по крайней мере, ваш код будет чище.

Переименуйте ваш button.scss в _button.scss, и вам не нужно писать подчеркивание в @import 'utilities/mixins';

Подчеркивание означает, что файл scss является частичным.Более подробная информация здесь: Зачем ставить перед именем файла "_" или "_" в scss / css?