Is it possible to trigger HMR when importing variables from a .scss file?

// vars.scsss
$myVar: blue;

// component file
<template>
  <div>
    <h1>{{ text }}</h1>
    <button>I'm a button</button>
  </div>
</template>

<script></script>

<style scoped lang="scss">
@import "./vars.scss";

div {
  h1 {
    // Imported from @import "./vars.scss";
    color: $myVar;
  }

  button {
    color: red;
  }
}
</style>

It would be amazing to see the HMR work when the variable from .vars.scss changes. Is that possible?

It's possible, but requires @vue/compiler-sfc to add specific logic for returning imports encountered in the sass file.

Awesome! Any chance that functionality will make it into @vue/compiler-sfc? I could try to lend a hand if it is something that might be a good first issue. I haven't touched Vue core before but would love to help out where I can.

https://github.com/vitejs/vite/pull/281#issuecomment-636231251

Same Issues But Some Differences

I started a mini-project of Vue 3.0 UI Component and I'd like to give it a try with Vite, since I'm using a "style-component-divided" way to manage my project, I want to just write only one line of .scss file.

There is the repo of the project and I think this issue can be reproduced.

【 Repo 】

How did the bug performance

Check out the main.js file and you can see:

import './styles/index.scss';

This entry file would import all the components' styles, but when I modified something in src/Button/button.scss, the [vite:hmr] didn't update it !!

It may be quite different from this issue but all of them are .scss HMR issues.

I hope this issue could be solved soon. 😄

@ShenQingchuan Yeah. This case is already considered. But I'm not recommand for import all css into one file (main.js).For current implement, it will full update form main.js when one scss file changed.

@ShenQingchuan Yeah. This case is already considered. But I'm not recommand for import all css into one file (main.js).For current implement, it will full update form main.js when one scss file changed.

OK！Thanks for this useful suggestion!

Is there a way to track progress of this feature ? The PR linked was merged but does not address the HMR issue for sass preprocessor (is there an issue on @vue/compiler-sfc we can follow ?)

It still does not work for Sass files imported outside from the current package.

I have to re-save the file where it's imported and then it also only temporary applies the style until I reload the page.

It happens with files imported from node_modules folder and with files outside the package directory.

As a workaround I symlink the sass styles into my package directory so I can test my ui package efficiently. But I think this should be fixed.

I still have the problem with the styles resetting when I reload the page with this workaround.