Auto-compile imported scss files in style tags when they have changed

Consider this code example

<style lang='scss'>
   @import '/src/css/variables.scss';

   $border-dark: rgba($base-color, 0.88);

   .alert {
     border: 1px solid $border-dark;
   }
</style>

Currently when I make changes to the variables.scss no components that import it update or reflect its changes. I have to save each component that imports it. Is there a way to get this working currently or is this a feature that needs building? Basically to recompile all affected files when imported .scss files are changed?

I’m currently using Svelte 3 and Parcel for my build along with a svelte.config.js file the contents of which look like this:

const sveltePreprocess = require('svelte-preprocess');
module.exports = {
  preprocess: sveltePreprocess()
};

[vexkiddy]

Ok… it works in the test repro I made for you, so the error I’m getting must be from another package I’m using in my main project! So all good! Amazing work! Thank you so much! 👍 💯

[rhernandog]

Ahh… sorry, I was a bit lost in the production file since it’s minified.

This is the log of result.stats after running npm run dev:

{
  "entry": "data",
  "start": 1581515108039,
  "includedFiles": [
    "D:/Web Apps/Svelte/webpack-sass-startup/template-webpack/src/app.scss"
  ],
  "end": 1581515108086,
  "duration": 47
}

After making a change in the scss file nothing happens in the CLI though.

Finally I’ve used node sass with Vue and React bundles using webpack dev server without any issues when the files are updated.