如何在 svelte 组件中重新加载 CSS 而不重新加载页面？

Question

我在 Rails 应用程序上使用实时重新加载。在sprocket CSS（正常模式）下，更改代码中的CSS，在浏览器中刷新CSS，无需重新加载页面。

我在 Rails 应用程序中添加了 Svelte，现在，如果我更改组件中的 CSS => 它将重新加载所有页面。

有一种方法可以检测 css 何时更改，只需刷新样式而不重新加载页面？

Answer 1

您可以使用BrowserSync或

webpack-dev-server

等工具实现

实时CSS重新加载

，而无需刷新整个页面。 您必须配置这些工具才能与您的

Rails app

和

Svelte components

配合使用。

使用

BrowserSync

的示例起点：

#1 安装 BrowserSync

npm install -g 浏览器同步

#2 为 BrowserSync 创建配置文件

module.exports = {
    files: ["app/assets/stylesheets/**/*.css"], // CSS files "listener"
    proxy: "localhost:3000", // your app address
    reloadDelay: 200 // Delay before reloading
};

#3 启动浏览器同步

浏览器同步启动--config bs-config.js

#4 将其与 Svelte 集成

如果您使用

Svelte components

，请确保您的 CSS 被编译为由

BrowserSync

侦听的单个 CSS 文件，或者

BrowserSync

以某种方式侦听所有 CSS 文件。

可能需要配置构建过程以将编译后的 CSS 文件输出到

BrowserSync

正在侦听的位置。