Rails: Install and configure bootstrap on rails 6

Question

how do I make bootstrap work on my custom layouts in rails 6

I have install bootstrap with the yarn add bootstrap jquery popper.js command and configured my the ..app/config/webpack/environment.js as follow.

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

... import 'bootstrap' import "../stylesheets/application"

..app/javascript/stylesheets/application.scss

@import '~bootstrap/scss/bootstrap';

Everything works fine but when I created another layout file,the layout does not import the bootstrap library.

..layout/visitor.html.erb

<html> ..... <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %> ....

The bootstrap library is not loaded in this visitor.html.erb layout it is loaded only in the application.html.erb layout file.

how to fix the problem

user11544535 · Accepted Answer · 2020-01-12 20:26:21Z

4

you need change

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

to

<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

answered Jan 12, 2020 at 20:26

user11544535

Sign up to request clarification or add additional context in comments.

4 Comments

foliwe83 Over a year ago

I have change the <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> but did not still work

user11544535 Over a year ago

not in visitor.html.erb but i mean in application.html.erb

user11544535 Over a year ago

@foliwe83 your vote down make me try again :) . but work finally .

foliwe83 Over a year ago

sorry about that

Collectives™ on Stack Overflow

Rails: Install and configure bootstrap on rails 6

..app/javascript/packs/application.js

..app/javascript/stylesheets/application.scss

..layout/visitor.html.erb

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

..app/javascript/packs/application.js

..app/javascript/stylesheets/application.scss

..layout/visitor.html.erb

1 Answer 1

4 Comments

Related