SvelteKit组件的<style>标签内能否使用变量实现动态样式？

可行的实现方案有两种，适配不同的Svelte版本： #

方案1：CSS自定义属性传递（全版本兼容，最稳妥）

这种方式可以完美适配伪类样式需求，不需要依赖高版本Svelte特性，实现步骤如下：

1. 给你的主标签绑定自定义CSS变量，把动态背景图地址传递进去：

<main style:--bg-url="url('{backgroundImage}')">
  <!-- 组件内容 -->
</main>

2. 在<style>标签内直接调用该CSS变量即可，伪类中也可以正常使用：

<style>
main {
  background-image: var(--bg-url);
  height: 85vh;
  position: relative;
}
/* 你需要的before伪类样式 */
main::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: var(--bg-url);
  /* 其他自定义伪类样式 */
  opacity: 0.3;
  z-index: -1;
}
</style>

方案2：高版本Svelte原生插值支持

如果你使用的是Svelte 4.0及以上版本，原生已经支持在<style>标签内直接使用{}插值调用组件变量，你写的写法本身是对的，升级Svelte版本即可生效：

<script>
// 确保变量是组件内的响应式变量或者导出属性
export let backgroundImage = '';
</script>

<main />

<style>
main {
  background-image: url('{backgroundImage}');
  height: 85vh;
}
</style>

内容的提问来源于stack exchange，提问作者sylargaf