sveltejs/svelte-loader

Changes to imported SCSS in style tag is not triggering a recompile / hot reload

andymerskin opened this issue · 5 comments

andymerskin commented

Hey there,

I feel like I'm missing something, but I have a pretty common use case where I'm importing a SCSS file into my component's <style>. The file is importing just fine and my changes in the imported SCSS are reflected whenever I save my Component.html file, but any changes to the .scss file I'm importing doesn't trigger a compile + reload or HMR.

<div class="thing"></div>

<style lang="text/scss">
  @import 'styles/pages/thing.scss';
</script>
  • Do I need to manually trigger a Svelte compile through sass-loader somehow? If so, does that even make sense when using svelte-loader?
  • Is there some magic I need to do in svelte-loader's preprocess.style option?
  • I should note that hotReload is also enabled, and emitCSS is only enabled for production, not when using webpack-dev-server.

Any suggestions? And please let me know if I can provide more information to help figure this one out. :) Thanks!

ekhaled commented

There is this PR #66

I think you have to manually hook it up... not sure whether the pre-processor should do it automatically or not.

Here is the relevant docs on this regard: https://github.com/sveltejs/svelte-loader/blob/master/README.md#external-dependencies

andymerskin commented

Hmm, I might be misunderstanding what externalDependencies is used for, but I don't think this solves the issue.

Are you saying that I need to list every SCSS file I need to import in externalDependencies for it to hot reload CSS in my Svelte component files? That's super tedious and backwards. :/

svelte-loader should be watching for changes to files being imported into a Svelte component. Right now, any JS modules (including CSS modules) that are being imported in the script tag trigger compilation when they are changed, but any changes to CSS/SCSS files being imported in the style tag aren't triggering compilation.

Ti-webdev commented

I fix recompile by adding dependencies #75 here and in svelte-preprocess sveltejs/svelte-preprocess#16

  • 👍2
Rich-Harris commented

closed via #75 — thanks @Ti-webdev !

alexilin83 commented

Can anyone show exact webpack config with watching for imported sass files?