CODEWITHSUNDEEP
cssscopecomponentsrulessvelte-3
Alain BUFERNE
Alain BUFERNE

Reputation: 2071

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....

Upvotes: 7

Views: 8250

Answers (2)

Sunday Power Inemesit
Sunday Power Inemesit

Reputation: 336

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

Upvotes: 7

Lucas
Lucas

Reputation: 578

To enable preprocessing of external .css files into your svelte components, add a reference to svelte-preprocess in your svelte.config.js, like this:

import preprocess from 'svelte-preprocess'
    
export default {
    preprocess: preprocess(),
}

Then in your component.svelte, do:

<script lang="ts">
  let count: number = 0
  const increment = () => {
    count += 10;
  }
</script>

<button on:click={increment}>
  count is: {count}
</button>

<style src="./counter.css"></style>

Where ./counter.css is the file you want to import to your component.

Upvotes: 1

Related Questions