Релейные активы: прекомпиляция странного поведения

Я оказался перед странным поведением задачи assets:precompile или, по крайней мере, перед тем, что я не совсем понял.

Итак, я использую Rails 3.1.3, Sprockets 2.0.3, Less 2.0.11 для своего веб-приложения, плюс я полагаюсь на Bootstrap для макета, поэтому я использую также less-rails 2.1.8 и less- rails-bootstrap 2.0.8. Я настроил стиль, как они говорят здесь.

Конфигурация моих активов:

stylesheets
|--application.css.scss
|--custom-style/
 |--variables.less
 |--mixins.less
 |--buttons.less
|--custom-style.css.less

В application.css.scss я делаю

//=require custom-style

И в обычном стиле я делаю

@import "twitter/bootstrap/reset";
//@import "twitter/bootstrap/variables"; // Modify this for custom colors, font-sizes, etc
@import "custom-style/variables";
//@import "twitter/bootstrap/mixins";
@import "custom-style/mixins";
// And all the other standar twitter/bootstrap imports...
// Other custom-style files to import
@import "custom-style/buttons"
//...
// And other rules here
//...

Наконец, в buttons.less я использую некоторые переменные и mixins, определенные в файлах variables.less и mixins.less Bootstrap, @white и .buttonBackground более подробно.

Если я запустил bundle exec rake assets:precompile с указанной выше конфигурацией, задача завершится неудачно, и я получаю эту ошибку:

$ bundle exec rake assets:precompile
/usr/local/rvm/rubies/ruby-1.9.3-p0/bin/ruby /usr/local/rvm/gems/ruby-1.9.3-p0/bin/rake assets:precompile:all RAILS_ENV=production RAILS_GROUPS=assets
rake aborted!
.buttonBackground is undefined

Но если я это сделаю, измените

buttons.less --> buttons.css.less
@import "buttons" --> @import "buttons.css.less"

Все отлично работает!!

Связано ли это с областью меньших переменных и функций при работе с вложенными импортами? Или что-то, что связано с порядком, меньше парсера или Sprockets обрабатывает дерево импорта?

Я что-то упустил или что-то сделал не так?

Спасибо:)

Примечание. Я получаю ошибку даже с исходными переменными и файлами mixins, поэтому он не связан с выполненными в них переопределениями.

3 ответа

Я могу подумать об одной из двух возможностей прямо сейчас:

1) Вы должны изменить application.css.scss на application.css.less и использовать:

@import "custom-style";

вместо звездочек //= require ...

2) Компилятор LESS очень тонко связан с точкой с запятой. Я заметил, что у вас есть @import "custom-style/buttons" - это должно быть @import "custom-style/buttons";

Неверно, если проблема действительно такая простая, но это начало.


Это на самом деле не отвечает на ваш вопрос, но единственная причина, по которой вы смешиваете sass и меньше использовать twitter bootstrap? Если вы предпочитаете использовать только sass, есть некоторые самозахваты, где авторы конвертируют меньше в scss, например bootstrap-sass. Прежде чем я потратил слишком много времени на попытку манипулировать обоими в проекте, я бы полностью купил в том или ином, но это только мое мнение.


Вы пробовали переименовать файл в buttons.css.less, но сохраняя расширение с @import (т.е. @import "buttons")?

Как я это делаю с SCSS, и он отлично работает.

Другая мысль заключается в замене //=require custom-style в application.css.less директивой @import "custom-style". Руководство по Rails здесь рекомендует использовать @import (который обрабатывается с помощью SCSS/LESS) превышает //=require (который обрабатывается с помощью Sprockets):

Если вы хотите использовать несколько файлов Sass, обычно вы должны использовать правило Sass @import вместо этих директив Sprockets. Используя директивы Sprockets, все файлы Sass существуют в пределах их собственной области действия, делая переменные или миксины доступными только в документе, в котором они были определены.

licensed under cc by-sa 3.0 with attribution.