Я обнаружил, что заставить Locomotive работать с Bourbon (или Susy, или любым аддоном SASS gem) — это двухэтапная проблема. Во-первых, ресурсы должны быть правильно загружены в gemfile Wagon, а затем они должны быть @imported в каждом зависимом файле для правильной компиляции при pushed в Engine.
Чтобы Bourbon правильно импортировался в Wagon (1.5.1), добавьте Bourbon в gemfile в группе :misc в соответствии с образцом шаблона:
group :misc do
# Add your extra gems here
gem 'bourbon', require: 'bourbon'
end
Затем просто запустите $ bundle install, и все должно работать нормально. Я обнаружил, что мне не нужно делать $ bourbon install и хранить файлы .css в моей папке public/stylesheets. Самоцвета хватило на мой экземпляр Wagon.
Однако добавление сайта в Engine может оказаться непростой задачей. Wagon скомпилирует файлы SASS в произвольном порядке push (ссылка: LocomotiveCMS Google Group< /а>). Следовательно, лучшая практика DRY rails, состоящая в том, чтобы все ваши @import вызовы находились в одном основном файле sass, а ссылки только на этот файл в файле application.css верхнего уровня здесь не сработают:
./public/stylesheets
-application.css #requires self and main
-main.scss #imports all other stylesheets, normally where we'd @import 'bourbon'
/other_stylesheets
-variables.scss
etc. etc.
На push Wagon не поймет, что main.scss @imported Bourbon опережает все остальные ресурсы. Таким образом, это обычно не работает с «неопределенным миксином ...»
Чтобы решить эту проблему, я по-прежнему помещаю variable.scss, mixins.scss и т. д. в папку (например, ./public/stylesheets/base/) и вызываю @import для этих ресурсов на каждой конкретной таблице стилей страницы (posts.scss и т. д.). .). Кроме того, любая таблица стилей, которая использует Bourbon, Neat, Susy, любой миксин, должна вызывать @import для этой ссылки на гем, и миксины, и переменные... она должна повторяться в каждом зависимом листе.
./public/stylesheets
-application.css # requires self and main
-main.scss # imports all other stylesheets, normally where we'd @import 'bourbon';
/other_stylesheets
-variables.scss # might @import 'font-awesome';
-mixins.scss # @import 'bourbon'; @import 'variables';
etc. etc.
К сожалению, это НЕ очень СУХОЕ кодирование. На самом деле, вероятно, есть много раздувания и избыточности, которые можно устранить. На данный момент это самый надежный метод, который я нашел для pushвставки моего сайта Wagon в Engine с использованием этих драгоценных камней. При этом, если вы ищете быстрое решение, вместо того, чтобы идентифицировать каждый ресурс @import для каждой страницы, вы можете создать таблицу стилей import.scss, которая вызывает Bourbon, Neat, what-have-you и просто @import этот импорт. scss на каждый второй лист.
Последняя загвоздка (знаменитые последние слова!), заключается в том, что Engine не принимает файлы .scss или .sass, несмотря на документацию. Таблицы стилей препроцессора должны начинаться с .css:
main.scss => main.css.scss
В противном случае Engine выдаст ошибку "вам не разрешено загружать..."
Надеюсь, это поможет!
ОБНОВИТЬ:
Через пару недель после публикации я понял, что причина проблем с Sass в Locomotive по сравнению с другими приложениями Rails: я использовал старый синтаксис sprockets в своем файле application.css.
Таким образом, лучший способ — создать как можно больше партиалов Sass (начинайте имена файлов со знаком подчеркивания -> _example.css.scss). Затем измените application.css на лист Sass -> application.css.scss. Наконец, не используйте никаких вызовов *= require, как мы использовали для Sprockets. Вместо этого мы можем и должны использовать лучшие практики Rails для вызовов Sass @import. Вы даже можете разместить свои частичные файлы в подпапках, если хотите. Причина в том, что Locomotive по умолчанию устанавливает гем sass-sprockets и sass-rails. Эти драгоценные камни включают @import в файле application.css.scss с конвейером sprockets/asset. Используя партиалы Sass для последующих таблиц стилей, компиляция для application.css.scss будет иметь свой собственный домен и вызывать в него партиалы вместо того, чтобы компилировать каждый последующий лист в своем собственном домене. В противном случае вы, вероятно, увидите сбой wagon push с «неизвестным миксином...» на первом листе за пределами основного листа приложения. Если вы упорядочиваете свои партиалы в правильном порядке зависимости (какой файл нужен каждому листу? Он идет первым...), этот метод также имеет дополнительное преимущество, заключающееся в том, что скомпилированная таблица стилей приложения остается очень СУХОЙ.
Ваше здоровье!
person
Jeff Harris
schedule
05.01.2015
