question: is 'live-reload' functionality supposed to work with imported sass files?

[tony-kerz]

i have this in my 'main' sass file:

@import "~app/module-1/module-1";

and then another sass file at ./app/module-1/_module-1.scss,
but when i edit _module-1.scss the live-reload functionality is unaware and doesn't refresh.

is there some setup which will be aware of these imported files?

here is a link to my sample project on github for reference.

best,
tony.

[jhnns]

Thx for the sample project. With "live reload": Do you mean page reload on file change or do you actually mean Hot Module Replacement (HMR), which replaces the stylesheets on the fly (#37)?

[tony-kerz]

hi @jhnns, i was actually set up for HMR, but i tried with webpack-dev-server without using HMR and it still didn't update when i changed the imported scss file...

[jacobp100]

I am also finding this. If I have a setup:

/styles
  _variables.scss
  app.scss
/variants
  /a
    _style.scss

Where app imports variables, and variables imports styles, an update to styles has no effect, but an update to either app or variables does have an effect. FWIW, /variants/a is configured with an includePath (and is the only includePath).

[DawidJanczak]

I think the issue in general is that you require webpack modules with require and @import is a SCSS directive. I imagine you have a require "app" somewhere, do you also require "variables"? Then again @import used to work with HMR before sass-graph was removed.

[jacobp100]

The issue is that I can’t import _variables or _style, as they contain nothing but variables. Importing in throws an error.

[DawidJanczak]

Thanks @jacobp100, your example and mention of includePath got me a bit farther with this. It looks like if you use includePath and then have an @import with path relative to that included path, HMR breaks. If, on the other hand, you use a path relative to the required manifest file it works fine.
In your case you're probably saying @import "variables" and @import "style". Try changing the latter to @import "../variants/a/style" and see if that works.
@jhnns is this expected behaviour?

[jacobp100]

I'm sure that would work, although there's also variants/b that can be used in place, and whether it points to a or b is specified in the webpack config.

[jhnns]

There's currently an issue with the style-loader which makes HMR impossible.

[jhnns]

HMR is not a concern of the sass-loader