Образы Ruby on Rails 3.1 и jQuery UI

Question

Я использую Ruby on Rails (Edge, версия для разработчиков), а Ruby rvm 1.9.2.

application.js выглядит следующим образом.

//= require jquery
//= require jquery-ui
//= require jquery_ujs
//= require_tree 

Где находитсяправильное место в Ruby on Rails 3.1 для размещения темы jQuery UI ?

Согласно Поля автозаполнения в Ruby on Rails 3.1 с jQuery UI Я должен поместить тему jQuery UI в папку vendor / assets / stylesheets.Это звучит как умное место, чтобы иметь его, но я не могу заставить его работать: - (.

Мне удалось загрузить CSS, поместив его в папку assets / stylesheets, но изображения, которые яне удалось загрузить.

Конечно, я мог бы использовать старый способ, просто поместив тему в папку public / stylesheets / и используя:

<%= stylesheet_link_tag "jquery/ui-lightness/jquery-ui-1.8.11.custom" %>

в приложении.html.erb, но, пытаясь быть современным человеком, я бы предпочел использовать новый способ выполнения тингов: -).

Answer 1

Объединение предложений вот что заставило меня работать:

Поместите папку CSS темы пользовательского интерфейса jQuery в vendor/assets/stylesheets.

Поместите vendor.css в vendor/assets/stylesheets:

*= require_tree ./theme-css-name

В production.rb Я добавил это:

config.assets.paths << File.join(Rails.root,'vendor/assets/stylesheets/theme-css-name

Это то, что нужно, чтобы получить изображения для предварительной компиляции и разрешения без редактирования CSS-файла темы jQuery UI или перемещения изображений наружу.папки CSS темы.

Answer 2

В Ruby on Rails предлагается предлагаемое исправление , которое делает прекомпиляцию образов jQuery UI.

(Начиная с 3.1.0rc6, прекомпилятор ресурса использует регулярное выражение /\w+\.(?!js|css).+/ длянайти вещи для компиляции. Это пропускает все изображения jQuery UI, потому что их имена включают тире и подчеркивания.)

Answer 3

Для меня работало то, что вместо CSS-файла темы jQuery в app/assets/stylesheets/ и изображений в app/assets/images/.Я поместил их в app/assets/images/images/, и это сработало.Это что-то вроде взлома, но, похоже, на данный момент он работает с минимальной затейкой и без изменения CSS-файлов.

Answer 4

Я думаю, вы можете поместить стили пользовательского интерфейса в app / assets / stylesheets.Сделайте что-то вроде этого:

# app/stylesheets/application.css.scss
//= require_self
//= require libraries/jquery-ui
//= require_tree .

В таблице стилей 'jquery-ui' что-то вроде этого:

.class{
  background: url(/assets/jquery-ui/ui-icons_222222_256x240.png)
}

Answer 5

На тот момент я нашел не идеальное, но работающее решение.

Предполагается, что у вас есть тема пользовательского интерфейса jQuery в папке /vendor/assets/stylesheets/.Затем вам нужно изменить application.css :

/* =require ui-lightness */

и создать plugin_assets_monkey_patch.rb в /config/initializers

Dir[File.join(Rails.root, 'vendor/assets/stylesheets/*/')].each do |dir|
    AppName::Application.config.assets.paths << dir

    index_content = '/*=require_tree .*/'

    index = File.join(dir, 'index.css')
    unless File.exist?(index)
        File.open(index, 'w') { |f| f.puts index_content }
    end
end

index.css в каждой подпапке /vendor/assets/stylesheets/ гарантирует, что таблицы стилей, такие как jquery-ui-1.8.11.custom.css, будут скомпилированы (если вам требуется эта подпапка).

config.assets.paths гарантирует, что папки, подобные /vendor/assets/stylesheets/ui-lightness/images, будут видныв корневой области приложения.

Answer 6

Получить размещенную тему CDN от Google:

    = stylesheet_link_tag 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/ui-lightness/jquery-ui.css'

Answer 7

Используя Ruby on Rails 3.1.1, я просто разместил файлы следующим образом. Никаких других изменений не требовалось.

• Приложение / активы / таблицы стилей / JQuery-щ-1.8.16.custom.css
• Приложение / активы / изображения / щ-bg_highlight-soft_75_cccccc_1x100.png
• ...

Answer 8

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

1.) Добавлен CSS в папку assets / stylesheets

2.) Добавил images в папку assets / images

3.) Удалил пути ко всем изображениям в CSS с помощью find"url (images /" и замените на "" , оставив только имя файла изображения.

/* Example: */ .ui-icon { background-image: url(images/ui-icons_222222_256x240.png) ; }
/* Becomes: */ .ui-icon { background-image: url(ui-icons_222222_256x240.png) ; }

Bingo! Все должно работать правильно.