prependData async for e.g. tailwindcss

[rottmann]

Not sure if it is a bug, a feature request, an intended process, or simply my misconfiguration.

When using a prependData scss file, that is compiled async (tailwindcss watch mode), the compiled scss is not used in the browser.

sveltePreprocess config:

preprocess: sveltePreprocess({
  postcss: {
    plugins: [
      tailwindcss(),
      autoprefixer()
    ]
  },
  scss: {
    prependData: '@import "src/app.scss";'
  },
  sourceMap: true,
  typescript: true
}

src/app.scss

@tailwind base;
@tailwind components;
@tailwind utilities;

Is it possible to use it with prependData?

When you use it in a svelte file it works (but then i did not need prependData):
src/App.svelte

<style lang="scss" global>
  @import "./app.scss";
</style>

My problem is that i want to use it with Storybook. So I have to declare the App.svelte style definitions in every component. That's why i want to use prependData. But this seems not to work with tailwindcss.

[dummdidumm]

I don't fully understand. Do you want prependData to work on SCSS files outside of Svelte? This is not what this feature is for, prependData only works inside .svelte files.

[rottmann]

Inside of svelte.
As defined in my sveltePreprocess config tailwindcss is not accessible within my svelte component. Only if i use the import code in src/App.svelte.

[kaisermann]

Hey @rottmann 👋 can you share a reproducible project?