svelte-preprocess-import-css

This is a Svelte preprocessor that allows you to import scoped CSS files into your Svelte components. Based on this issue

Usage

You can add it to your svelte.config.js, then add it to the preprocessor list:

import { importCSSPreprocess } from '@ryoppippi/svelte-preprocess-import-css';
export default {
  preprocess: [
    importCSSPreprocess(), // <--
    svelteAutoPreprocess(),
  ],
};

Now you can use @import "./whatever.css" scoped;.

For example, the following CSS:

<style>
@import "./a.css" scoped;
@import "./b.css" scoped;

.another-style { display: block }
</style>

will get converted into:

<style>
contents of a.css will be here
contents of b.css will be here

.another-style { display: block }
</style>

License

MIT