I made a new rails 7 app with esbuild:
rails new myapp -j esbuild
package.json:
{
"name": "app",
"private": "true",
"dependencies": {
"@hotwired/stimulus": "^3.0.1",
"@hotwired/turbo-rails": "^7.1.3",
"esbuild": "^0.14.43",
"esbuild-svelte": "^0.7.1",
"sass": "^1.52.3",
"svelte": "^3.48.0",
"svelte-preprocess": "^4.10.7"
},
"scripts": {
"build": "node ./esbuild.config.js"
}
}
esbuild.config.js:
#!/usr/bin/env node
var watch = process.argv.includes("--watch");
var esbuild = require('esbuild')
var esbuildSvelte = require('esbuild-svelte');
var sveltePreprocess = require('svelte-preprocess');
esbuild
.build({
entryPoints: ["app/javascript/application.js"],
bundle: true,
outfile: "app/assets/builds/all.js",
// outdir: "app/assets/builds/",
plugins: [
esbuildSvelte({
preprocess: sveltePreprocess(),
}),
],
logLevel: "debug",
watch: watch
})
.catch(() => process.exit(1));
It works, but all.css in builds / folder was not included in my CSS. It contains sevelte processed sass to css.
I have the default manifest.js:
//= link_tree ../images
//= link_directory ../stylesheets .css
//= link_tree ../builds
It includes builds, but that works only for JS, not CSS
I tried to add: *= require ../builds/all.css to application.css:
/*
*= require_tree .
*= require_self
*= require ../builds/all.css
*/
However I get this error:
couldn't find file '../builds/all.css' under '/home/matrix/ruby/competition/app/assets/stylesheets' with type 'text/css'
How do I include svelte built CSS to the regular asset CSS pipeline (application.css)?