Блог

Сначала я записал все стили css в один файл, но все усложняется, поэтому я разделил свои файлы sass по папкам. Я нашел статью из Интернета и последовал за ней. В нем говорится: «если мы поместим _ перед файлом sass, он не будет индексироваться компилятором»

• Создано 3 папки
• Создал файлы _test_name.scss, подобные этому
• Создал файл _index.scss для каждой папки и импортировал все остальные файлы scss в эту папку
• Создал файл main.scss и импортировал в него все файлы index.scss.

Все работает нормально, но если я использую переменную color где-нибудь в другой папке, это не сработало. Это дало мне сообщение об ошибке неопределенной переменной. После этого я импортировал файл colors scss, и он заработал. Но это странно, не так ли? Он должен работать без импорта файла colors scss. Теперь дело в том, что если я вижу свои стили в инструментах разработчика, один и тот же стиль повторяется три раза! Пожалуйста, проверьте изображение

Я сделал что-то не так здесь?

Использование директив Sprockets плохо работает с SASS.

Sprockets предоставляет некоторые директивы, которые помещаются внутри комментариев, называемых require , require_tree , и require_self . НЕ ИСПОЛЬЗУЙТЕ ИХ В СВОИХ ФАЙЛАХ SASS / SCSS. Они очень примитивны и плохо работают с файлами Sass. Вместо этого используйте встроенную директиву @import от Sass, которую sass-rails настроил для интеграции с соглашениями ваших проектов Rails.

Итак, первое, что вы должны сделать, это избавиться от любых директив sprockets в вашем application.scss и оставить компиляцию для SASS *. Это наиболее вероятное объяснение того, почему вы видите, что одни и те же стили применяются три раза require_tree . , так как они поглощают любые части.

Поэтому вместо этого вы должны сделать:

 @import "test_name"
  

sass-rails предоставляет функции глобализации, которые также могут использоваться для запроса всех частичных файлов в каталоге.

 @import "mixins/*" 
@import "mixins/**/*"
  

Однако обычно лучше вручную импортировать ваши зависимости, поскольку порядок загрузки трудно определить.