How to include css into bundled js instead of seperate file with esbuild?

Question

It always generates two files - main.js and main.css, how can I force it to include css into main.js? I looked through documentation but there seem to be no mentions on how to do it. Here is my config:

import process from 'process';
import esbuild from 'esbuild';
import builtins from 'builtin-modules';
import esbuildSvelte from 'esbuild-svelte';
import sveltePreprocess from 'svelte-preprocess';

const banner = `/*
`;

const prod = process.argv[2] === 'production';
const dev = process.argv[2] === 'development';

esbuild
  .build({
    banner: {
      js: banner,
    },
    bundle: true,
    entryPoints: ['./src/main.ts'],
    external: [...builtins],
    loader: { '.mp3': 'dataurl' },
    format: 'cjs',
    logLevel: 'info',
    minify: prod ? true : false,
    outfile: 'main.js',
    plugins: [
      esbuildSvelte({
        preprocess: sveltePreprocess(),
      }),
    ],
    sourcemap: 'inline',
    target: 'es2016',
    treeShaking: true,
    watch: !prod && !dev,
  })
  .catch(() => process.exit(1));

Borouch · Accepted Answer · 2022-08-02 03:40:26Z

2

I figured it out. Turns out configuration had to be added to svelte plugin

esbuildSvelte({
   compilerOptions:{ css: true },
   preprocess: sveltePreprocess(),
}),

answered Aug 2, 2022 at 3:40

Borouch

1236 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to include css into bundled js instead of seperate file with esbuild?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related