esbuild override application.css from sass when css is imported in javascript.

[james-em]

Build script

  "scripts": {
    "build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds",
    "build:css": "sass ./app/assets/stylesheets/application.scss ./app/assets/builds/application.css --no-source-map --load-path=node_modules"
  }

Issue

When importing CSS in a js file, esbuild generates an application.css. Sass also generates the same file and gets overridden by esbuild.

Result

Without CSS in a js file, my CSS is working fine.
With CSS in a js file, only the CSS imported in the js file is present in builds/application.css

If it's the expected behavior, is there a way to just merge them or avoid having to use multiple stylesheet_link_tag and multiple output file?

[dhh]

Known conflict. You need to name one of the outputs differently by hand.

[mkhairi]

I use custom plugin for esbuild to skip css

#!/usr/bin/env node

const path = require('path')
const { build } = require('esbuild')

const noStyle = {
  name: 'empty-css-imports',
  setup(build) {
    build.onLoad({ filter: /\.css$/ }, () => ({ contents: '' }))
  },
}

build({
  entryPoints: ['application.js'],
  bundle: true,
  sourcemap: process.argv.includes('--sourcemap'),
  minify: false,
  logLevel: 'info',
  outdir: path.join(process.cwd(), 'app/assets/builds'),
  absWorkingDir: path.join(process.cwd(), 'app/assets/javascripts'),
  watch: process.argv.includes('--watch'),
  plugins: [ 
    noStyle
  ]
}).then(() => console.log("⚡ Build complete! ⚡")
).catch((error) => {
  console.error(error)
  process.exit(1)
})

"scripts": {
    "build": "node esbuild.config.js",
    "build:css": "sass ./app/assets/stylesheets/application.scss ./app/assets/builds/application.css --no-source-map --load-path=node_modules"
}

[rorykoehler]

For those finding this in 2024/25 watch isn't supported as a direct option in the build() call anymore. This is my esbuild.config.js:

const esbuild = require("esbuild");

const ignoreCSSPlugin = {
  name: "ignore-css",
  setup(build) {
    build.onLoad({ filter: /\.css$/ }, () => ({
      contents: "",
    }));
    build.onLoad({ filter: /\.scss$/ }, () => ({
      contents: "",
    }));
  },
};

const buildOptions = {
  entryPoints: ["app/javascript/application.js"],
  bundle: true,
  format: "esm",
  sourcemap: process.env.RAILS_ENV === "development",
  outdir: "app/assets/builds",
  target: "es2017",
  logLevel: "info",
  plugins: [ignoreCSSPlugin],
};

async function startBuild() {
  if (process.env.RAILS_ENV === "development") {
    // Use the context API for watch mode
    const ctx = await esbuild.context(buildOptions);
    await ctx.watch(); // Start watching files for changes
    console.log("🔍 Watching for file changes...");
  } else {
    // Regular build for non-development environments
    esbuild.build(buildOptions).then(() => {
      console.log("⚡ Build complete!");
    }).catch(() => process.exit(1));
  }
}

startBuild();

and this is in my package.json

"scripts": {
    "build:js": "node esbuild.config.js",
    "build:js:watch": "RAILS_ENV=development node esbuild.config.js",
    "build:css": "sass --load-path=node_modules app/javascript/stylesheets/application.scss app/assets/builds/application.css --no-source-map",
    "build:css:watch": "sass --load-path=node_modules app/javascript/stylesheets/application.scss app/assets/builds/application.css --watch"
  },

Then start your rails app with bin/dev and it should work