failed to @extend “.class”. The selector “.class” was not found

#ruby_on_rails #sass #scss

Application.css

*= require palette
*= require global
*= require_tree .
*= require_self


vendor/assets/stylesheet/pallete.scss

.grey {
  background-color: #9e9e9e;
}


global.scss

html {
  body {
    header {
      @extend .grey;
    }
  }
}


Выдаёт ошибку: 


  "html body header" failed to @extend ".grey".
  The selector ".grey" was not found.
  Use "@extend .grey !optional" if the extend should be able
  to fail.


Если класс .grey прописать в файле global.scss и в том же файле экстендить - то всё
работает нормально, из любых других файлов не экстендит.

Пробовал перемещать файл palette из vendor в app, менять местами порядок в application.css,
убирал *= require_tree ., обновлял гемы, перегружал сервер, компьютер - результат тот же.

rake assets:clean
rake assets:precompile


Тоже ничего не изменили.

В пустом приложении с нуля такая же проблема.

Версии руби и гемов:


ruby 2.2.0p0
Rails 4.2.5
sass (3.4.21)
sass-rails (5.0.4)

    

Ответы

Ответ 1

Всё правильно, SCSS-файлы компилируются Sass'ом поодиночке, а потом Sprockets (система
сборки ассетов в Rails) сшивает из них итоговые стили (используя директивы require
в комментариях).

Таким образом, когда собирается global.scss, о содержимом palette.scss Sass ничего
не знает. Чтобы узнал, нужно соответствующий файл импортировать:

@import 'palette.scss'


...да, это очень похоже на CSS-овый @import, Sass его синтаксически расширяет, аккуратно
отлавливая случаи, когда его нужно оставить "как есть". Фактически это включает содержимое
указанного файла на место этой директивы. То есть, импорт можно делать даже внутри
блока правил, и всё будет загружено внутрь него. В гайде по ссылке выше расписаны детали.



Обращаю внимание, что идиоматичный Sass-импорт обычно происходит с файлами, имеющими
_ в начале имени файла (т. н. partial), вроде _palette.scss, а импортируют так:

@import 'palette'




Нужно также понимать, что употребление во включаемых файлах кода, который рендерится
в непустой CSS, приведёт к тому, что в результате эти блоки будут встречаться несколько
раз, если в результате этот файл импортирован несколько раз. Чтобы этого избежать,
можно использовать селектор-заглушку:

%grey {
  background-color: #9e9e9e;
}


Если отрендерить эту конструкцию в CSS, получится пустой файл. Но при этом можно
делать @extend %grey, получая желаемый эффект.