我正在開發(fā)一個表格組件，它將在我的任何項目中可用(當它正確工作時包含在庫中)。 因為有很多css規(guī)則與這個組件相關(guān)，所以我想把樣式放在組件的svelte文件之外。 我所做的是編寫一個單獨的css文件，通過以下方式導入到組件svelte文件中:

import './table.css';

但是在這種情況下，我可以在構(gòu)建的bundle.css文件中看到我的規(guī)則，但是這些規(guī)則不在我的組件范圍內(nèi)。 所以我想知道是否有我喜歡或不喜歡的方法....

是的，當設(shè)置了svelite-preprocess后，您可以使用& ltstyle src = & quot。/table . CSS & quot；& gt& lt/style & gt；在。細長的文件 https://github . com/sveltejs/svelte-預處理#外部文件

啟用外部的預處理。css文件到您的svelte組件中，在您的svelte.config.js中添加一個對svelte-preprocess的引用，如下所示:

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

然后在您的component.svelte中，執(zhí)行以下操作:

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

在哪里？/counter.css是要導入組件的文件。