0

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?

Victor
  • 35
  • 5

1 Answers1

0

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

Joel Blum
  • 7,750
  • 10
  • 41
  • 60