hot reloading doesn't work on styles "text/sass" with @import

[bugleev]

Started here: rollup-plugin-svelte. The problem: I have a component using svelte-preprocess-sass like this:

<style type="text/sass">
@import "./test.sass"
</style>

when contents of test.sass are changed in dev mode, styles are not updated in the browser. Although when i'm not using @import:

<style type="text/sass">
.someClass
  color: red
</style>

everything works fine. Any ideas how to resolve this?

here's rollup.config.js:

export default {
  input: "src/main.js",
  output: {
    sourcemap: true,
    format: "iife",
    name: "app",
    file: "public/bundle.js"
  },
  plugins: [
    svelte({     
      dev: !production,
      preprocess: {
        style: sass({
          indentedSyntax: true
        }),
      },    
      css: css => {
        css.write("public/bundle.css");
      }
    }),
    resolve(),
    commonjs(),   
    !production && livereload("public"),
    production && terser()
  ]
};

[paco3346]

This really depends on your tooling and how you're watching. From your description it sounds like your file watcher isn't noticing the change to test.sass.

I use chokidar with rollup because it offers a few extra bells and whistles and I'm able to successfully trigger changes in the browser when I edit an import()ed sass file.

[bugleev]

Thanks for response. I added

watch: {
    chokidar: true
  }

to rollup.config.js, and installed chokidar, but that doesn't seem to have any effect. scripts are like this:

"autobuild": "rollup -c -w",
"dev": "run-p start:dev autobuild",

Can you share your approach please, which makes things work?