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.

Reply

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

Reply

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

Reply

use bin/dev to run instead of rails s

Reply

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

Reply

Thank you so much! Was so lost lol!

Reply

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?

Reply

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

Reply

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

Reply

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.....

Reply

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

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

Thank you so much Sachin!

Reply

Works like a charm! Thank you so much!

Reply

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!

Reply

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

Reply

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

Reply

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.

Reply

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

Reply

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

Reply

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

Reply

How can i use this in already installed app

Reply

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 %>
Reply

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

Reply

... 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.

Reply

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

Reply

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.

Reply

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');
Reply

I have replace the webpacker with esbuild in my rails 7 project, js files are compiling but not working, and not getting any error.

Reply
Join the discussion
Create an account Log in

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

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

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