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.
I've followed the steps but got a few errors, mainly the JS is not working. Any idea why?
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
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
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!
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.
How can I add more stylesheets for different namespaces, eg an admin.css to the yarn watchlist?
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');
I have replace the webpacker with esbuild in my rails 7 project, js files are compiling but not working, and not getting any error.