Использование jQuery, Bootstrap и Sass в моем проекте Rails

Question

Я установил все необходимые драгоценные камни, чтобы иметь jQuery, Sass и Bootstrap Sass в моем проекте rails. Однако я не знаю, как их использовать. Я также включил все файлы Bootstrap в конвейер активов и изменил файлы для импорта/использования этих файлов.

Это мой application.css.scss:

@import "_bootstrap-sprockets"; 
@import "_bootstrap"; 

И это мой application.js:

//= require jquery 
//= require jquery_ujs 
//= require turbolinks 
//= require_tree . 
//= require bootstrap-sprockets 

Теперь я генерироваться контроллер и попытался использовать JQuery в нем, прямо, не делая ничего особенного, как это:

<script type="text/javascript">$(function() { alert('Hello') })</script> 

Но, по-видимому, я я делаю что-то неправильно. Должен ли я сделать какое-то включение jQuery/Bootstrap/Stylesheets в мои файлы erb?

Как уже говорилось, я новичок в Rails, и я ищу, чтобы начать. Ответы будут высоко оценены.

Answer 1

Я предполагаю, что вы добавили gem 'bootstrap-sass', '~> 3.2.0.0' (на момент написания этой статьи) в ваш Gemfile, запустили bundle install в терминале и затем перезапустили сервер рельсов.

Рельсы способ делать вещи бы тогда создать новый файл в трубопроводе таблицы стилей активов app\assets\stylesheets и назовите его custom.css.scss (ваш выбор файла до вас, но расширение файла должно заканчиваться css.scss).

Добавьте следующее содержимое в файл custom.css.scss:

@import "bootstrap-sprockets"; 
@import "bootstrap"; 

Добавьте следующее содержимое в файл application.css:

/* 
*= require_tree . 
*= require_self 
*/ 

*= require_tree . добавляет все в каталоге стилей и *= require_self будет включать в себя какие-либо линии код, который вы положили в application.css после закрытия требований */.

Далее вам также нужно будет добавить javascript для загрузки. В вашем файле application.js вам необходимо включить загрузку в определенном порядке и с использованием собственных имен. Переупорядочьте файл выглядеть следующим образом:

//= require jquery 
//= require jquery_ujs 
//= require bootstrap 
//= require turbolinks 
//= require_tree . 

Предполагая, что вы уже включили следующие строки в верхней части макета приложения

<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> 
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %> 

вы должны быть хорошо идти.