CODEWITHSUNDEEP
ruby-on-railsruby-on-rails-6
user12073145
user12073145

Reputation:

Adding Bootsrap 4 on Rails 6

I recently read a lot of tutorials on online on how can I successfully install bootstrap 4 on the new version of Rails.

Here's the step I have taken so far:

  1. yarn add bootstrap jquery popper.js

  2. in config/webpack/environment.js added the following:

    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

  3. in app/javascript/packs/application.js added the following:

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

  4. in app/assets/stylesheets/application.css add the following:

    @import "bootstrap/scss/bootstrap";

I also tried adding a custom.scss file (_custom.scss file) on the same scss folder and tried to change the background color if it does.

Just to see if bootstrap is running I added a class table table-dark but did not work.

Any idea what am I missing here?

Upvotes: 2

Views: 295

Answers (1)

Samy Kacimi
Samy Kacimi

Reputation: 1238

You just need to run this in a separate tab:

./bin/webpack-dev-server

If afterwards you get a "Compiled successfully" message from webpacker, then you're good to go! Otherwise it will show you the errors you need to fix in order for the assets to compile & load properly.

Upvotes: 1

Related Questions