我正在開發一個表格組件,它將在我的任何項目中可用(當它正確工作時包含在庫中)。 因為有很多css規則與這個組件相關,所以我想把樣式放在組件的svelte文件之外。 我所做的是編寫一個單獨的css文件,通過以下方式導入到組件svelte文件中:
import './table.css';
但是在這種情況下,我可以在構建的bundle.css文件中看到我的規則,但是這些規則不在我的組件范圍內。 所以我想知道是否有我喜歡或不喜歡的方法....
是的,當設置了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中,執行以下操作:
<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是要導入組件的文件。