CODEWITHSUNDEEP
cssruby-on-railssveltelivereload
Matrix
Matrix

Reputation: 3369

How reload CSS in svelte component without reloading page?

I use live reload on my Rails app. In sprocket CSS (normal mode), change CSS in code make a refrech css in browser without reloading page.

I add Svelte in my rails app and now, if I change CSS in component => it will reload all page.

There is a method to detect when css change, just refrech style without reloading page ?

Upvotes: 5

Views: 360

Answers (1)

HelloThere12345
HelloThere12345

Reputation: 1958

You can achieve live CSS reloading without refreshing the entire page by using tools like BrowserSync or webpack-dev-server. You must configure these tools to work with your Rails app and Svelte components.

Example starting point with using BrowserSync:

#1 Install BrowserSync

npm install -g browser-sync

#2 Create a config File for BrowserSync

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

#3 Start Browsersync

browser-sync start --config bs-config.js

#4 Integrate it with Svelte

If you are using Svelte components, make sure that your CSS is compiled into a single CSS file that is listened by BrowserSync or that BrowserSync somehow listens all CSS files.

It may be necessary to configure your build process to output the compiled CSS files to a location that BrowserSync is listening.

Upvotes: 0

Related Questions