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

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

Как реализовать поддержку Twitter Bootrstap в Rails 6

2019-05-07 12:20:39







Фреймворк Twitter Bootrstap используется сейчас во многих веб проектах в качестве стандарта fron-enda. В Ruby on Rails версии 5.х он подключался обычно в качестве gemа. В этой же версии появилась поддержка Yarm (https://yarnpkg.com/en/) - по факту это bundler для Javascript библиотек и ресурсов. В Rails версии 6 (бета 1) yarn сейчас используется можно сказать, более активно. Теперь мы можем установить Twitter Bootrstap с его помощью. Попробуем установить его:


1. Как ставить yarn в систему, есть в документации. Будем считать, что у нас он уже есть. Далее, внутри Rails проекта запустим команду:


/var/www/rails6project# yarn add bootstrap jquery popper.js
yarn add v1.15.2
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@1.2.9: The platform "linux" is incompatible with this module.
info "fsevents@1.2.9" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning " > webpack-dev-server@3.3.1" has unmet peer dependency "webpack@^4.0.0".
warning "webpack-dev-server > webpack-dev-middleware@3.6.2" has unmet peer dependency "webpack@^4.0.0".
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 3 new dependencies.
info Direct dependencies
├─ bootstrap@4.3.1
├─ jquery@3.4.1
└─ popper.js@1.15.0
info All dependencies
├─ bootstrap@4.3.1
├─ jquery@3.4.1
└─ popper.js@1.15.0
Done in 28.49s.
root@TenLands:/var/www/scp#


Мы создадим новый webpack, в котором будут связаны все необходимые ресурсы.

2. Затем поместим в файл настроек, который находится “config/webpack/environment.js” такие строки:

const { environment } = require('@rails/webpacker')

const webpack = require('webpack')
environment.plugins.append('Provide', new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
Popper: ['popper.js', 'default']
}))

module.exports = environment


Они прописывают наш вновь созданный webpack в проект. Теперь он доступен для Rails приложения.


3. Осталось еще пару важных деталей. Поместить в файл

“app/javascript/packs/application.js” :

Строку:

require("bootstrap/dist/js/bootstrap")



И еще, поместим поддержку стилей в файл:

"app/assets/stylesheets/application.css”

Добавим вот такую строку:

@import "bootstrap/scss/bootstrap";



Это все.

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


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
























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