(SASS) Hot module replacement refreshing whole app

[taltrui]

Describe the bug

CSS Hot Module Replacing is refreshing the whole app when using Sass modules with Sass functions.

I don't know if this is related to webpack, node-sass or sass-loader, but it seems weird because we have 2 projects that use the same config, one using a custom getIn function to get colors from a Sass map and other doesn't. The first one refreshes all app when a Sass file is modified and the other one doesn't.

Did you try recovering your dependencies?

Yes.

➜ yarn --version     
1.17.3

Which terms did you search for in User Guide?

Sass, hot, hot reloading, refresh, sass function

Environment

System:
OS: Linux 5.0 Ubuntu 18.04.3 LTS (Bionic Beaver)
CPU: (4) x64 Intel(R) Core(TM) i5-7200U CPU @ 2.50GHz
Binaries:
Node: 10.16.3 - ~/.nvm/versions/node/v10.16.3/bin/node
Yarn: 1.17.3 - /usr/bin/yarn
npm: 6.9.0 - ~/.nvm/versions/node/v10.16.3/bin/npm
Browsers:
Chrome: 76.0.3809.132
Firefox: 69.0
npmPackages:
react: ^16.6.0 => 16.9.0 (15.6.2)
react-dom: >=16.0.0 => 16.9.0 (15.6.2)
react-scripts: ^3.0.0 => 3.1.1
npmGlobalPackages:
create-react-app: 3.1.1

Steps to reproduce

1. Write a custom Sass function and import and use it in others module.scss files.
2. Modify any module.scss file.

Expected behavior

Css should update without refreshing the whole app.

Actual behavior

Whole app gets compiled and refreshed

Reproducible demo

Since create react app base project is really thin it doesn't provide much insight because compiling and refreshing is too fast. Although you can add the function i'm using and a map and use that function in some .module.scss file and then change another file, this will cause to refresh the whole app and not replace the css with HMR as it should.

@function getIn($map, $keys...) {
  $map-buff: $map;
  $map: map-get($color-map, $map);
  @if not $map {
    @warn 'Couldn\'t found map: #{$map-buff}';
    @return '';
  }
  @each $key in $keys {
    $map: map-get($map, $key);
    @if not $map {
      @warn 'Couldn\'t found key: #{$key}';
      @return '';
    }
  }
  @return $map;
}

Thanks for the help!

[iansu]

This looks like a duplicate of #7665.

[taltrui]

Hi @iansu ! I've read that issue but my problem arises when using a sass function. If I don't use any function then HMR does work as expected.