How to customize Bootstrap with esbuild-rails

README.md

How to customize Bootstrap 5 with esbuild-rails

You can see the various files added in this gist to really do the bulk of the work.

The important bits seem to be:

yarn add esbuild-sass-plugin

Add a new esbuild config file somewhere and update your package.json script to use that new file (I used app/assets/config/esbuild.js)

Add to package.json (replace the previous build script if one is present!):

  "scripts": {
    "build": "node app/assets/config/esbuild.js"
  },

Then, I removed the app/assets/stylesheets/application.css and added an empty .keep file in its place

if deploying to heroku...

1. Add the nodejs buildpack before the ruby buildpack heroku buildpacks:add heroku/nodejs -i 1
2. I had to ensure I had a app/assets/stylesheets/ director with a .keep file.
3. I ensured my manifest.js in app/assets/config looked like

//= link_tree ../images
//= link_directory ../stylesheets .css
//= link_tree ../builds

app_assets_config_esbuild.js

// app/assets/config/esbuild.js

const watch = process.argv.includes("--watch") && {
   onRebuild(error) {
     if (error) console.error("[watch] build failed", error);
     else console.log("[watch] build finished");
   },
 };

// remember to yarn add esbuild-sass-plugin for this to work properly!
const { sassPlugin } = require("esbuild-sass-plugin")

require("esbuild")
  .build({
    entryPoints: ["app/javascript/application.js"],
    bundle: true,
    outdir: "app/assets/builds/",
    watch: watch,
    plugins: [
      sassPlugin({
        type: ["css", "bootstrap/**"]
      })
    ]
  })
  .catch(() => process.exit(1));

application.js

// app/javascript/application.js

// Entrypoint for the esbuild command defined in package.json scripts
// Using Bootstrap, first our style overrides then all the Bootstrap JS.
import "./scss/main.scss";
import 'bootstrap';

import "@hotwired/turbo-rails"
import "./controllers"

console.log('hello from esbuild with customized bootstrap!')

main.scss

// app/javascript/scss/main.scss

// custom variables go above the @import
$primary: #0055b0;
$body-bg: #efefef;

@import "~bootstrap/scss/bootstrap.scss";

Far better than any other option currently available.