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.
I've followed the steps but got a few errors, mainly the JS is not working. Any idea why?
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:
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
/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
#!/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
is this the new standard way of doing things? is it in the guides somwhere?
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
My application.html.erb contains the following:
I'm seeing the same issues on a fresh installation of Rails 7, following this guide. Did you manage to fix this?
Second the request for the "right" way to add another .css.
In particular I am using Leaflet.js and Leaflet adds some css.
@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');