Bootstrap 5 Alpha
Add Bootstrap 5 Alpha to your rails app, with SCSS file for overriding default styles
Used 33 times
C
Charlie Reese
Usage
Run this command in your Rails app directory in the terminal:
rails app:template LOCATION="https://railsbytes.com/script/x9Qs13"Template Source
Review the code before running this template on your machine.
# 1. Set up Bootstrap 5 SCSS
gem 'bootstrap', '~> 5.0.0.alpha1'
run 'bundle'
create_file 'app/assets/stylesheets/bootstrap_customizer.scss' do <<-EOF
@import "bootstrap/functions";
@import "bootstrap/variables";
$theme-colors: map-merge(
(
"primary": #15879b,
"light-grey": rgb(249, 250, 251),
),
$theme-colors
);
EOF
end
create_file 'app/assets/stylesheets/bootstrap_styles.scss' do <<-EOF
@import "bootstrap_customizer";
@import "bootstrap";
EOF
end
inject_into_file 'app/views/layouts/application.html.erb', before: /<\/head\>/ do <<-EOF
<%= stylesheet_link_tag 'bootstrap_styles', media: 'all', 'data-turbolinks-track': 'reload' %>
EOF
end
# 2. Set up bootstrap 5 JS
def yarn(*packages)
run("yarn add #{packages.join(" ")}")
end
yarn 'popper.js', 'bootstrap'
inject_into_file 'config/webpack/environment.js', after: "const { environment } = require('@rails/webpacker')\n" do <<~EOF
const webpack = require('webpack')
environment.plugins.append('Provide', new webpack.ProvidePlugin({
Popper: ['popper.js', 'default']
}))
EOF
end
inject_into_file 'app/javascript/packs/application.js' do <<~EOF
import 'bootstrap/dist/js/bootstrap'
EOF
end