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

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


Solution 1:[1]

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"
  }

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 stevec

Related Questions