Installing Bootstrap in Rails 6

0

% yarn add bootstrap jquery popper.js
app/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
app/javascript/packs/application.js
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")

import 'bootstrap'
config/webpacker.yml
resolved_paths: ['app/assets']

rename stylesheets/application.css to stylesheets/application.scss

app/assets/stylesheets/application.scss
@import "bootstrap/scss/bootstrap";

If you want to keep your css files separated per controller (for example pages below) or separate out the header and footer like I do you can do the following

app/assets/stylesheets/application.scss
@import "bootstrap/scss/bootstrap";

@import "header";
@import "footer";
@import "pages";

  • 0 posts
  • 1 subtopic
  • 8 days ago by vince