Search code examples
cssimportinlineviteesbuild

esbuild import css as a string

I am using vite to build a component library. I use css?inline like this

import otherStyles from './bar.css?inline' // will be available as a string

And use the string to construct stylesheets in the component. see here

Now I made a build script with esbuild. But can't seem to get this inline css to work. Esbuild parses the import but makes an external css.

I know vite (dev env) is based on esbuild, so it should be possible to let esbuild do inline css parsing. Can't find it in the docs, can't find a plugin that does this either.

Solution

  • https://github.com/claviska/esbuild-plugin-inline-import

    Usage:

    import string from 'inline:./path/to/file.ext';

    f.e.

    import cssCode from 'inline:./path/to/style.css';