0

I'm using a custom Sass importer that lets me import JavaScript/JSON files into my Sass. The issue I'm having is that when I save some JavaScript file that is being imported into my Sass, it doesn't trigger a hot-update/reload when using webpack-dev-server.

If I import the file in question inside my main app's JavaScript as well, saving it works as expected (it will trigger a successful re-compile).

For some more context, I have a UI component that has an index.js file. Inside this index.js file I'm importing a Sass file. Inside this Sass file is where I'm importing my JavaScript file that doesn't trigger a reload when saving.

I'm not really sure if this is a Node-Sass issue or a Webpack issue but everything else is working as expected. I can import other Sass files into the main Sass file and saving those will trigger a hot-reload/update.

ESR
  • 1,669
  • 1
  • 18
  • 22

1 Answers1

0

I got to the bottom of this. Inside my custom Sass Importer, I was returning with:

{ contents: "String" }

...as per the Node-Sass docs. I should have instead returned with:

{ 
  file: "String",
  contents: "String" 
}

With file being the computed path to the imported file. Without passing this, Node/Webpack will not be aware of the file so will not be watching it for changes.

ESR
  • 1,669
  • 1
  • 18
  • 22