CODEWITHSUNDEEP
ruby-on-railsbootstrap-4
Victor
Victor

Reputation: 45

proper Bootstrap loading in rails 6

I have an application in rails 6 that requires bootstrap. Bootstrap is being loaded at application.css

/*
 *
 *= require bootstrap
 *= require jquery-ui
 *= require font-awesome
 *= require_tree
 *= require_self
*/

I created a folder /stylsheets/admin where I keep my admin css. There, unless I import bootstrap again, its does not apply to the admin layout

admin_layout.scss:

@import "font-awesome";
@import "bootstrap";
@import "admin";

However that causes bootstrap to appear twice when the page loads. My question here is: what is the proper way to do this? I've solved it in a few ways but none of then feel 'right'.

Solution 1: I removed the 'require bootstrap' from application.css. Since the 'require_tree' loads all files and folders inside stylesheets/ bootstrap applies to application. If I add more layouts that will be an issue however.

Solution 2: (even worse) to move admin_layout.css outside of stylesheets/ so that 'require_tree' does not load it.

I've looked about and didnt find the 'proper way' to do it. What am I missing?

Upvotes: 0

Views: 59

Answers (1)

Joel Blum
Joel Blum

Reputation: 7878

You can try using the stub directive after require_tree

/*
 *
 *= require bootstrap
 *= require jquery-ui
 *= require font-awesome
 *= require_tree
 *= require_self
 *= stub admin_layout
*/

https://github.com/rails/sprockets#stub

Similar question has been answered already Asset Pipeline: excluding an admin.css file

Upvotes: 0

Related Questions