Svelte: Npm run dev, isn't watching for global.css

[taylorosbourne]

Whenever I save in App.svelte, the styles in my global.css go away. The console output is

[2019-06-06 21:54:56] waiting for changes...
[21:54:57] 200 ─ 0.43ms ─ /bundle.css?livereload=1559872497155
[21:54:57] 200 ─ 0.38ms ─ /
[21:54:57] 200 ─ 0.43ms ─ /bundle.css
[21:54:57] 200 ─ 0.64ms ─ /bundle.js
[21:54:59] 200 ─ 0.46ms ─ /
[21:54:59] 200 ─ 0.15ms ─ /bundle.css
[21:54:59] 200 ─ 0.53ms ─ /bundle.js
[21:54:59] 200 ─ 0.60ms ─ /favicon.png

however, saving in the global.css file will bring them back and console output is this

[2019-06-06 21:55:17] waiting for changes...
[21:55:19] 200 ─ 3.59ms ─ /
[21:55:19] 200 ─ 0.86ms ─ /bundle.css
[21:55:19] 200 ─ 1.22ms ─ /bundle.js
[21:55:19] 200 ─ 0.53ms ─ /favicon.png
[21:55:22] 200 ─ 0.34ms ─ /global.css?livereload=1559872522807

as you can see, saving in App.svelte doesn't reload the global.css file. Is this normal? Sorry, new to svelte. Thanks!

[s0kil]

@taylorosbourne Could you include your rollup.config.js and package.json?

[taylorosbourne]

@s0kil

Package.json

{
"name": "svelte-app",
"version": "1.0.0",
"devDependencies": {
"npm-run-all": "^4.1.5",
"rollup": "^1.10.1",
"rollup-plugin-commonjs": "^9.3.4",
"rollup-plugin-livereload": "^1.0.0",
"rollup-plugin-node-resolve": "^4.2.3",
"rollup-plugin-svelte": "^5.0.3",
"rollup-plugin-terser": "^4.0.4",
"sirv-cli": "^0.4.0",
"svelte": "^3.0.0"
},
"scripts": {
"build": "rollup -c",
"autobuild": "rollup -c -w",
"dev": "run-p start:dev autobuild",
"start": "sirv public",
"start:dev": "sirv public --dev"
}
}

and rollup.config.js

import svelte from 'rollup-plugin-svelte';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import livereload from 'rollup-plugin-livereload';
import { terser } from 'rollup-plugin-terser';

const production = !process.env.ROLLUP_WATCH;

export default {
input: 'src/main.js',
output: {
sourcemap: true,
format: 'iife',
name: 'app',
file: 'public/bundle.js'
},
plugins: [
svelte({
// enable run-time checks when not in production
dev: !production,
// we'll extract any component CSS out into
// a separate file — better for performance
css: css => {
css.write('public/bundle.css');
}
}),

    // If you have external dependencies installed from
    // npm, you'll most likely need these plugins. In
    // some cases you'll need additional configuration —
    // consult the documentation for details:
    // https://github.com/rollup/rollup-plugin-commonjs
    resolve(),
    commonjs(),

    // Watch the `public` directory and refresh the
    // browser on changes when not in production
    !production && livereload('public'),

    // If we're building for production (npm run build
    // instead of npm run dev), minify
    production && terser()
],
watch: {
    clearScreen: false
}

};

[s0kil]

@taylorosbourne In your configuration, Rollup is setup to watch files in the src directory and then livereload the browser, however, if you want to also watch for changes in public/global.css, you could include in your rollup.config.js like so:

  watch: {
    clearScreen: false,
    // Add this line to your config
    include: "public/global.css"
  }

[taylorosbourne]

@s0kil I added that line to the config. However, it's still losing my styles when I make a change to a svelte file.

[s0kil]

Not sure what you are trying to achieve here.

[fschuetz04]

What was the solution here? It's still the same for me.

Steps to reproduce:

1. Use the svelte template and serve it with npm run dev, open the webpage in your browser
2. Change something in public/global.css. Change is visible in the browser
3. Change something in src/App.svelte. This change is visible in the browser after a reload, but not the previous change in public/global.css. Same happens after a manual reload of the webpage.

Same behaviour after I made the recommended change in rollup.config.js. Even after exiting from npm dev, restarting it and reloading the webpage, the change in public/global.css is still not visible - only after saving public/global.css again (but again, only until the next change in a svelte file / a reload of the webpage).

I used Chrome on Windows (webpage served from Ubuntu 18.04 in WSL) for testing this. The solution for me is to reload the webpage with caching disabled (Ctrl + Shift + R in Chrome). Is this considered a problem with rollup, svelte or the template using the global.css file or is it just by design?

[taylorosbourne]

@fschuetz04 I don't actually know what the solution is. I made the change in rollup.config.js and it didn't seem like anything had changed so I gave up. The next day, I reopened the project and could no longer recreate the issue. For whatever reason, it was working. I have no idea if the inherent problem is with svelte, or rollup. Sorry to be absolutely no help 😞

[fschuetz04]

@taylorosbourne Thanks for your reply! Well I know of one solution, as written before: Reload the webpage with caching disabled (e.g. using Ctrl + Shift + R in Chrome). In your situation, the browser probably decided that the cached version of global.css was no longer valid.
But I don't think that the user should be required to reload in a special way to see all his changes. Maybe there can be done something to also process index.html with rollup and add a timestamp to invalidate caching, or maybe set the cache duration for all files to 0 ... That's why I asked whether it is considered a problem with any of the tools or just by design.

[TJBlackman]

Experiencing this issue currently. My Svelte styles are not getting applied to select components at all. Noticed that if I load the page without having Chrome DevTools open, it's fine, but as soon as Chrome DevTools is open, my Svelte styles will immediately be removed/reset, without even having to reload the page.. I disabled ALL extensions, no dice. Not an issue in FF though.. ;)

[divee789]

Pls i am having this issue, has there not been any fix yet,as having to save your global.css and the browser is quite annoying

[Extrogenesis]

If I am understanding you correctly when you would save the "global.css" styles were not refreshing as well. In Google Chrome under the network tab check to see if your browser is caching "global.css'; It was for me and fixed the problem.

[rodolph66]

This is still happening. CSS not getting loaded with each refresh. Disabling the cache in Network under devtools does circumvents the problem, but this is not a real solution. Some additional configuration might be required in rollup or the module sirv-cli.

After a few trials one of these can be tried:

1. disable the cache as pointed out above by Extrogenesis
2. In package.json "scripts" add an option for sirv so it reads: "sirv public -D -m 1"
3. Or use another npm server. Example script: "server": "http-server public -o -c -1",

[AlexxxMassyyy]

Same here... Is there any solutions ?

[skflowne]

Same problem here, definitely a cache issue

[Dieman89]

It's a cache problem, try cmd+shift+r :)

[bryan-mclennon]

I just had the same issue. It turned out that the webworker was hanging on to the instance of global.css that it was created with, and not updating it. Empty cache & hard reload would bypass and get the new one but next normal reload would get the old one. Restart server, browser, client machine did not clear it. Shutting down the server and having the webapp continue with the old version pointed me in the right direction. Unregistering the webworker in Application/Webworker (Chrome) cleared the problem.

[veighnsche]

I had the same issue. My solution was in rollup.config.js

I changed
css: css => { css.write('public/bundle.css'); },
to
css: css => { css.write('bundle.css'); },

(I use Intellij and before I marked the public folder as a resources root.)