使用Svelte:如何将组件样式放在一个单独的文件中，但仍以该组件为范围

Question

我正在开发一个表组件，该组件将在我的任何项目中可用(当它正常工作时，将包含在库中(。由于有很多css规则与此组件相关，我想将样式放在组件svelte文件之外。我所做的是编写一个单独的css文件，我通过导入到组件svelte文件中

import './table.css'; 

但在这种情况下，我可以在构建的bundle.css文件中看到我的规则，但这些规则不在我的组件范围内。所以我想知道是否有办法随心所欲。。。。

Answer 1

是的，在设置svelte预处理时，可以在.svelte文件中使用<style src="./table.css"></style>https://github.com/sveltejs/svelte-preprocess#external-文件

Answer 2

要将外部.css文件预处理到svelte组件中，请在svelte.config.js中添加对svelte预处理的引用，如下所示：

import preprocess from 'svelte-preprocess'

export default {
preprocess: preprocess(),
}

然后在你的组件中。速度，做：

<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是要导入到组件中的文件。