Search code examples
svelteesbuild

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


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


Solution

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

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