如何在不刷新页面的情况下重载Svelte组件中的CSS？

原因分析 #

Svelte组件内的CSS会被编译绑定到组件逻辑中，默认的Rails实时重载机制会把.svelte文件的变更识别为JS/组件文件修改，从而触发整页刷新，而非像Sprockets管理的独立CSS那样仅更新样式。

解决方案 #

1. 分离Svelte组件CSS到独立文件（适配Sprockets环境）

• 把Svelte组件内<style>块的内容抽离到app/assets/stylesheets下的独立CSS文件（比如svelte_components.css）
• 删除组件内的<style>块，在Rails的样式入口文件（比如application.css）中通过@import "svelte_components"引入该文件
• 这样修改CSS时，Sprockets的实时重载会单独刷新样式，不会触发整页重载

2. 配置Vite的Svelte CSS热更新（适配Rails + Vite环境）

如果你的项目用Vite替代Sprockets管理前端资源，调整vite.config.js开启CSS热注入：

import { defineConfig } from 'vite'
import rails from 'vite-plugin-rails'
import svelte from '@sveltejs/vite-plugin-svelte'

export default defineConfig({
  plugins: [
    rails(),
    svelte({
      hot: {
        injectCss: true, // 强制CSS热更新，不刷新页面
      },
    }),
  ],
})

修改Svelte组件内的CSS时，Vite会直接注入更新后的样式，无需整页刷新。

3. 自定义LiveReload规则（适配Rails自带LiveReload）

创建或修改config/initializers/live_reload.rb，添加针对Svelte组件的样式更新规则：

Rails.application.config.live_reload << {
  path: %r{app/javascript/components/.*\.svelte$},
  url: ->(path) { "/assets/application.css" }, # 替换为你的项目样式入口URL
  method: :put
}

该规则会把.svelte文件的变更映射为样式文件更新请求，从而实现仅刷新样式的效果。

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