All threads / How to use Bootstrap with CSS bundling in Rails Discussion
Ask A Question

Notifications

You’re not receiving notifications from this thread.

How to use Bootstrap with CSS bundling in Rails Discussion

Thanks for another great video. It's no wonder why I sometimes feel lost in the Rails ecosystem. I learned Rails using the asset pipeline, then it switched to using Webpacker which I never fully understood. Now it changes again, this time using these new tools. I thinks this is for the better though and it seems more "Rails", which attracted me to the framework in the first place.

Any hint on how to add bootstrap-icons to this setup ?

I've followed the steps but got a few errors, mainly the JS is not working. Any idea why?

use bin/dev to run instead of rails s

Did you get this fixed? I had the same issue. If using Rails 6 you need to put 'import * as bootstrap from "bootstrap"' into the app/javascript/application.js file

Thank you so much! Was so lost lol!

Hey Chris: What would have to change in this setup if one wished to customize some of the Bootstrap styling? Can you just add another scss file to --watch?

Echoing the bootstrap-icon comment. Been playing with Rails 7 with esbuild and I can't seem to get it to work.

I'm assuming that you have installed Rails 7 with the -c bootstrap option, as shown in the video.

To install bootstrap-icons, you should do the following:

$ yarn add bootstrap-icons
$ echo "@import 'bootstrap-icons/font/bootstrap-icons';" >> app/assets/stylesheets/application.bootstrap.scss

Unfortunately that is not enough: you also need to make sure that the fonts are included in the asset pipeline. An easy way to do it is to copy them with your build script. Open your package.json, and edit as follows:

"scripts": {
    "build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds",
    "build:css": "yarn bootstrap-icons:copy-fonts && sass ./app/assets/stylesheets/application.bootstrap.scss ./app/assets/builds/application.css --no-source-map --load-path=node_modules",
    "bootstrap-icons:copy-fonts": "mkdir -p app/assets/fonts && cp -r node_modules/bootstrap-icons/font/fonts/ app/assets/fonts/"
  }

Don't forget to add the line //= link_tree ../fonts to app/assets/config/manifest.js

This recipe was inspired by this Jared White article: https://dev.to/jaredcwhite/how-to-install-shoelace-with-rails-7-esbuild-and-postcss-1cg9

When I do the above, I get a 404 when trying to load the font files in the fonts folder http://app.myapp.local:3000/fonts/bootstrap-icons.woff2?30af91bf14e37666a085fb8a161ff36d. I've added the //= link_tree ../fonts in app/assets/config/manifest.js so I would think this should work? If I try and swap /fonts for /assets/ in the above URL, the .woff2 file downloads.....

bin/dev gives the following error for Windows. Any idea how to run it on windows?

'bin' is not recognized as an internal or external command,
operable program or batch file.

My Procfile.dev looks like this

web: bin/rails server -p 3000
css: yarn build:css --watch

and bin/dev

#!/usr/bin/env bash

if ! command -v foreman &> /dev/null
then
  echo "Installing foreman..."
  gem install foreman
fi

foreman start -f Procfile.dev

I'm running bin/dev inside the project folder and using rails 6.1.4

  1. Remove bin/ in Procfile.dev
  2. Then just run foreman start -f Procfile.dev

Thank you so much Sachin!

Works like a charm! Thank you so much!

I opened an issue for this https://github.com/rails/cssbundling-rails/issues/63.
Because, I needed more than 2 days to find out how this gem is working with bootstrap-icons.

Crazy!

thanks to you, i got this working in 5 mins. cheers!

is this the new standard way of doing things? is it in the guides somwhere?
https://guides.rubyonrails.org/index.html

The think is we are speaking over Bootstrap and Reals in this case. But, as I mentioned it in my issue, I would love to have installer in bundling gem or documentation for how to add something like this in Rails Guides.

I'm trying to figure out, is the new "rails way" - the standard. or a side feature.

the commands in the vid are:
rails new bootstrap_demo -j esbuild --css bootstrap
bin/dev

How can I add more stylesheets for different namespaces, eg an admin.css to the yarn watchlist?

How can i use this in already installed app

I am a bit lost in this section and have been struggling to make this work for some time now. I followed this guide and I can see both application.css and application.js in the manifest folder of the asset pipeline and it seems to me they contain bootstrap all right. But the resulting style is a bit messed up and javascript parts like dropdowns aren't working. Any idea what could be wrong?

My application.html.erb contains the following:

    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
    <%= javascript_include_tag "application", "data-turbo-track": "reload", defer: true %>

I'm seeing the same issues on a fresh installation of Rails 7, following this guide. Did you manage to fix this?

... Embarrassingly, I copied the Navbar code from the wrong version of the Bootstrap documentation, with "data-toggle" instead of "data-bs-toggle". Hopefully this helps someone else if they get stuck.

Is this not against the whole idea of importmap and pining the javascript resources? To add jsbundling-rails ?

Second the request for the "right" way to add another .css.

In particular I am using Leaflet.js and Leaflet adds some css.
I tried @import './node_modules/leaflet/dist/leaflet.css'; in application.bootstrap.scss, but it doesn't work. Also confusing that this file isn't named application.scss and then add the bootstrap specific css.

Not sure if this answers it for you, but for external libraries, I've gotten either of these to work, depending on whether loading locally from node_modules or remotely from CDN:

// Load from node_modules
@use 'flatpickr/dist/themes/material_blue.css';

... or ...

// Load from CDN
@import url('https://npmcdn.com/flatpickr/dist/themes/material_blue.css');
Join the discussion

Want to stay up-to-date with Ruby on Rails?

Join 70,078+ developers who get early access to new tutorials, screencasts, articles, and more.

    We care about the protection of your data. Read our Privacy Policy.

    logo Created with Sketch.

    Screencast tutorials to help you learn Ruby on Rails, Javascript, Hotwire, Turbo, Stimulus.js, PostgreSQL, MySQL, Ubuntu, and more. Icons by Icons8

    © 2023 GoRails, LLC. All rights reserved.