Svelte (routify) + rollup: not watching for css changes in /static

Question

I want to be able to watch for changes in /static (for example, on global.css)

I am using the following code to watch for changes on my static directory:

        watch: {
            clearScreen: false,
            include: ["static/**", "src/**"]
        },

I also tried calling add "css" to the --extensions option in routify cli: routify -D --extensions svelte,html,md,css

However nothing works, and I can't seem to trigger a rebuild on changes to css files... Any advice?

Thanks!

Answer 1

Rollup watches only the files that are included in your bundle (i.e. that have been imported in a file directly or indirectly imported from your entry point -- input in your Rollup config). Said otherwise, files that are not imported but merely referenced in index.html can't rely on Rollup watcher. We would need a copy plugin with its own file watcher, but currently there are none.

If it's just for CSS assets, you can use rollup-plugin-postcss and import './global.css' from your main.js instead of having it directly in the static directory. Here's an article with detailed explanations on how to do just that.

...

Well, since I started writing this answer, there is now a copy plugin with watch capability: rollup-plugin-copy-watch.

So if you need more than just CSS, or if you don't want to include your global.css into your build process, you can use that instead.

Install in your project:

yarn add -D rollup-plugin-copy-watch

In your rollup.config.js, change the import:

// import copy from 'rollup-plugin-copy'
import copy from 'rollup-plugin-copy-watch'

And add a watch option to the copy plugin (also added verbose in the example, to ensure it works):

      copy({
        targets: [
          { src: staticDir + '/**/!(__index.html)', dest: distDir },
          { src: `${staticDir}/__index.html`, dest: distDir, rename: '__app.html', transform },
        ],
        copyOnce: true,
        flatten: false,

        watch: staticDir,
        verbose: true,
      }),