Modification on imported files in a Vue component "style" tag don't trigger a reload
Neijin opened this issue · 20 comments
Hi everyone !
It seems like Stylus imported files from the "style" tag of a Vue component don't trigger rebuilding and hot-reloading anymore.
button.vue
<style lang="stylus" scoped> @import "./button.import" </style>
button.import.styl
.button { color red cursor pointer }
Modifications of the button.import.styl file doesn't do anything.
First idea, have one of the meteor stylus package on your project as well. Every change on a .styl file will trigger a reload of your client.
You need to disable the hot reload by setting NO_HMR = 1 as environment variable.
Not a solution obviously since the change in stylus files will not get picked up by meteor-vue.
Second idea, in Stylus we are used to @import our style files by omitting the ".styl" extension at the end.
@import './index.import'
In vue-meteor for a single component, you have to add the ".styl" back to allow your imported Stylus files to be watched and reloaded (as mentionned in the documentation https://github.com/meteor-vue/vue-meteor/tree/master/packages/vue-stylus)
@import './index.import.styl'
In addition, you need to have hot reloading activated in your vue-meteor project (remove the NO_HMR = 1 from your environment variables).
This is pretty confusing. For a time, using the ".styl" extension works without any issue (for like a day or two). Then out of the blue, using the exact same imports :
- sometimes my CSS modifications will not get picked up after saving my imported Stylus files
- sometimes everything works
- sometimes I have to change the link to my Stylus file (remove the ".styl" add the end or add it again) to trigger a CSS reload
- worse, sometimes I have to edit the JS in my view component to trigger a CSS reload
Is there anything I don't get here ? I can't put my finger on what's causing this odd behaviour from HMR.
This is also happening to me with Sass (SCSS syntax). Everything was working fine until all of a sudden, SCSS modifications stopped triggering a reload, and some styles failed to be applied, specifically if not imported with the .scss extension. Hopefully, I found this issue and as @Neijin suggests, I'm experimenting with adding extensions. I hope that keeps working and I don't see random behavior, will see.
@alejandroiglesias Adding extensions didn't fix it for me. It might be linked to daisy-chained imports but I'm still not sure since the errors seem random. Are you on Windows ?
Put your entire style into the Vue component file should work fine, but this is not a solution for me.
@Neijin I'm on macOS. Adding the extension to all the Sass files did the trick. They compile correctly and I get updates as I code. The challenging part of the debugging was that there were 2 issues: 1) Not compiling files included without extension, and 2) not updating the page on reload. So when I removed the extensions from the imports (a common practice when I worked with pure/node-sass) the page didn't reload with the component unstyled (even though I manually reloaded a few times after), so I didn't notice it was breaking the build process. And then while debugging, when I went many commits back using git bisect, the code correctly had the extension but the page didn't update on reloading, so I still saw the unstyled component.
Anyhow, seems solved on my end but worse for your case on Stylus files and/or Windows environment.
Another issue I saw today which seems related is that the build/reload does not happen if I have a component with styles in a <style> tag and remove the whole tag altogether. I have to remove only the rules and leave the empty <style> for the build to happen.
@Neijin are daisy-chained imports also using an extension? It may be that if you import a library and the library imports other files without an extension it also breaks?
Unfortunately, I still see that sometimes it randomly stops compiling my main.scss file imported in my App.vue component. The problem is very bad since even after restarting Meteor I don't get the new styles compiled, as if it was cached.
In order to fix it I have to comment, save, and uncomment the import:
<style lang="scss">
//@import '../main.scss';
</style>
...save file...
<style lang="scss">
@import '../main.scss';
</style>
...save again and now I get new styles.
@alejandroiglesias I have exactly the same problem. None of what I tested so far worked for long.
@alejandroiglesias Daisy-chained imports with and without extension don't work reliably. Same issue with direct imports from the Vue Single File Component.
@Neijin have you found some workaround?
@Akryum I'm trying to make style changes in my application and this is becoming very annoying. Whenever I make changes to a file that's imported inside the component <style> tag (in my case: <style lang="scss">), the app doesn't update, even if I manually reload the browser (ie, doesn't recompile). What's most strange, if I comment out the import, save the file, and then uncomment, I get the new styles for a second, and then it goes back to the previous state (ie, a previous cache?).
Can you please give us a hint on how to solve it?
Thanks.
@alejandroiglesias For now I just switch between import and require for my stylus files inside the style part of my Vue component and then I saved. Pretty much like you. If it doesn't work (or sometimes when the CSS get rollbacked to a previous version), I have to make a meteor reset.
@Neijin I see. It's the same for me, but sometimes that doesn't work and I was wondering how to address that. By "meteor reset" you mean stop and restart the server or actually run meteor reset?
@alejandroiglesias Actually run the meteor reset command.
@alejandroiglesias @igal1c0de4n So. I found a "workaround" that seems to work for me now. I import all my shared-between-components Stylus files and I put the specific component CSS code directly inside the <style> tag.
<style lang = "stylus" scoped>
@require "~imports/common/client/style/constants/example1.import.styl"
@require "~imports/common/client/style/constants/example2.import.styl"
#my-component
{
text-align center
background-color THEME_COLOR_PRIMARY
}
</style>
Reloads seems to work fine when you have import/require and actual CSS code inside your <style> tag.
@Neijin yes I'm already aware of that. Most of the styles are residing in components, but the problem for me is global styles.
@alejandroiglesias I didn't experience any issues in this specific case for now. I'll let you know.
@Neijin how are you importing the styles?
It's fixed in the latest version of vue-stylus.