Search code examples
cssscopecomponentsrulessvelte-3

With Svelte : How to put component style in a separated file but still scoped to this component

I'm working on a table component which one will be usable (included in a library when it will work correctly)in any of my projects. As there is a lot of css rules related to this component I would like to put the style outside of the component svelte file. What I did is writing a separate css file which I import in the component svelte file by :

import './table.css';

But in such a case I can see my rules in the built bundle.css file but these are not scoped to my component. So I'm wondering if there is way of doing it as I would like or not....

Solution

  • yes, when svelte-preprocess is set up, you can use <style src="./table.css"></style> in the .svelte file https://github.com/sveltejs/svelte-preprocess#external-files