How exactly does //= require bootstrap/dist/css/bootstrap work?

user_5783745 0
Viewed 42

I have this in my application.scss, but I don't understand how it works:

//= require bootstrap/dist/css/bootstrap

What I do know:

  • Without it, the application doesn't get the boostrap styling added to the .css file.
  • I know require includes the css file that goes by the name of the argument in application's css.
  • I know it's conventional for these 'require' calls to be commented out, but I have no idea why, it's not a convention I've not seen anywhere else.
  • I've searched my entire application for directories similar to bootstrap/dist/css/bootstrap to figure out where the bootstrap css is coming from. But a search of the entire app doesn't reveal such directories (nor any files called bootstrap.css or bootstrap.scss).
  • The app I'm working on uses sprockets and webpacker. I think this syntax is unique to sprockets, although I'm not sure.

So TL;DR I understand what this line does, but could someone explain how //= require bootstrap/dist/css/bootstrap is working to get that css into the application?

ruby-on-rails
2 Answers

It's sprockets directive

Sprockets is a gem for assets compiling

So there are few directives with such syntax

//= require - Add the contents of a file to current

//= require_self - Change order of where current contents are concatenated to current

//= require_directory - Add contents of each file in a folder to current

//= require_tree - Add contents of all files in all directories in a path to current

//= link - Make target file compile and be publicly available without adding contents to current

//= link_directory - Make target directory compile and be publicly available without adding contents to current

//= link_tree - Make target tree compile and be publicly available without adding contents to current

//= depend_on - Recompile current file if target has changed

//= stub - Ignore target file

These directives are parsed with Sprockets::DirectiveProcessor entity

And about how it works with other libraries

There is config.assets.paths in the app when you use sprockets. So sprockets search assets there. For example in node_modules folder. It looks that you install bootstrap using yarn and this style sheets are in that directory

But if you install with gem, this gem add to config.assets.paths its own paths

user_106086210

Just to add to @mechincov's answer. I still couldn't work out where this bootstrap file was actually coming from (since there was no bootstrap directory in my app, and definitely no file located at bootstrap/dist/css/bootstrap.css - none that I could find, anyway.

But I (sort of) figured out where it was coming from. I believe it's coming into the app via yarn.lock, which contains this:

bootstrap@^4.5.2:
  version "4.6.1"
  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.6.1.tgz#bc25380c2c14192374e8dec07cf01b2742d222a2"
  integrity sha512-0dj+VgI9Ecom+rvvpNZ4MUZJz8dcX7WCX+eTID9+/8HgOkv3dsRzi8BGeZJCQU6flWQVYxwTQnEZFrmJSEO7og==

package.json also contains a reference to bootstrap (and associated libraries jQuery and popper), so perhaps that's where it originates:

  "dependencies": {
    "@rails/actioncable": "^6.0.0",
    "@rails/activestorage": "^6.0.0",
    "@rails/ujs": "^6.0.0",
    "@rails/webpacker": "5.4.3",
    "bootstrap": "^4.5.2",
    "jquery": "^3.5.1",
    "popper.js": "^1.16.1"
  }
user_57837450
Related