Где воздух гор - там тишина снегов, молчание камней и дремлет сила

Программирование Web

Установка поддержки Twitter Bootstrap в проект Ruby on Rails 4 / Ruby on Rails 5

2018-03-09 08:16:08







Twitter Bootstrap — самый популярный front-end framework сейчас. Чтобы интегрировать его вместе с поддержкой препроцессора Sass нужно использовать некоторые гемы.
Итак, все рассмотрим в деталях:

1. Установим новые гемы - gem 'bootstrap-sass' gem 'bootstrap-sass-extras'
для поддержки Bootstrap в в файл Gemfile.

myplace:/var/www/odn$ sudo bundle install
Fetching gem metadata from https://rubygems.org/...........
Fetching version metadata from https://rubygems.org/...
Fetching dependency metadata from https://rubygems.org/..
Resolving dependencies...
Using rake 11.1.2
Using i18n 0.7.0
Using json 1.8.3
Using minitest 5.8.4
Using thread_safe 0.3.5
Using builder 3.2.2
Using erubis 2.7.0
Using mini_portile2 2.0.0
Using rack 1.6.4
Using mime-types-data 3.2016.0221
Using arel 6.0.3
Using execjs 2.6.0
Using debug_inspector 0.0.2
Using sass 3.4.22
Using bundler 1.11.2
Using byebug 8.2.5
Using coffee-script-source 1.10.0
Using thor 0.19.1
Using concurrent-ruby 1.0.2
Using multi_json 1.12.0
Using mysql2 0.4.4
Using tilt 2.0.2
Using spring 1.7.1
Using rdoc 4.2.2
Using tzinfo 1.2.2
Using nokogiri 1.6.7.2
Using rack-test 0.6.3
Using mime-types 3.0
Installing autoprefixer-rails 6.3.6.1
Using uglifier 3.0.0
Using binding_of_caller 0.7.2
Using coffee-script 2.4.1
Using sprockets 3.6.0
Using sdoc 0.4.1
Using activesupport 4.2.6
Using loofah 2.0.3
Using mail 2.6.4
Installing bootstrap-sass 3.3.6
Using rails-deprecated_sanitizer 1.0.3
Using globalid 0.3.6
Using activemodel 4.2.6
Using jbuilder 2.4.1
Using rails-html-sanitizer 1.0.3
Using rails-dom-testing 1.0.7
Using activejob 4.2.6
Using activerecord 4.2.6
Using actionview 4.2.6
Using actionpack 4.2.6
Using actionmailer 4.2.6
Using railties 4.2.6
Using sprockets-rails 3.0.4
Using coffee-rails 4.1.1
Using jquery-rails 4.1.1
Using rails 4.2.6
Using sass-rails 5.0.4
Using web-console 2.3.0
Using turbolinks 2.5.3
Bundle complete! 13 Gemfile dependencies, 57 gems now installed.
Use `bundle show [gemname]` to see where a bundled gem is installed.
myplace:/var/www/odn$


2. Далее переименуем файл « /assets/stylesheets/application.css» в «/assets/stylesheets/application.css.scss» и поместим туда строки для подключения файлов стилей:

/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any styles
* defined in the other CSS/SCSS files in this directory. It is generally better to create a new
* file per style scope.
*
*= require_tree .
*= require_self
*/
@import "bootstrap-sprockets";
@import "bootstrap";


3. А в файл «/assets/javascripts/application.js» поместим новую строку, для поддержки javascripts

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require bootstrap-sprockets
//= require jquery_ujs
//= require turbolinks
//= require_tree .


4. На конец, запустим генератор шаблона:

myplace:/var/www/odn$ sudo rails g bootstrap:install
Running via Spring preloader in process 13245
create config/locales/en.bootstrap.yml

Кстати, можно выбрать несколько вариантов. Подробности есть в документации.

Затем обновим стиль файла шаблона:

myplace:/var/www/odn$ sudo rails g bootstrap:layout application
Warning: Running `gem pristine --all` to regenerate your installed gemspecs (and deleting then reinstalling your bundle if you use bundle --path) will improve the startup performance of Spring.
Running via Spring preloader in process 13254
conflict app/views/layouts/application.html.erb
Overwrite /var/www/odn/app/views/layouts/application.html.erb? (enter "h" for help) [Ynaqdh] y
force app/views/layouts/application.html.erb
myplace:/var/www/odn$


Наш проект готов. Это все.


Здесь нет комментариев


Новый комментарий:
























Яндекс.Метрика