How do I include svelte built CSS to the regular asset CSS pipeline

Viewed 49

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)?

0 Answers
Related