can not reload css when scss changed in dev server hot

[lichnow]

in dev server environment sass file also be extract to a css file which imported in main.js.so , it can not been hoted in dev server. can use only sass-loader,style-loader to solve it in dev server enviroment in encore,or let us to configure it self by add a method isDevServer to check if in dev-server?

[weaverryan]

Yea, that's correct - we always extract to a CSS file, which kills HMR. We did this on purpose - because we wanted to consistently output CSS files (not have different behavior between prod & dev environments). I've always wanted to add HMR for extracted CSS files, but it's always been a "todo" in the core webpack libs. For example, HMR is listed as a "TODO" on the https://github.com/webpack-contrib/mini-css-extract-plugin that we're using in the next version.

One option is to add a method to "opt in" to not extracting to CSS when in dev-server mode (and just use the style loader). That way, for people who know what they're doing and want HMR, they can opt into this.

[FullStackAlex]

Hey Ryan,
what do you mean by "One option is to add a method to "opt in" to not extracting to CSS when in dev-server mode (and just use the style loader). That way, for people who know what they're doing and want HMR, they can opt into this."?

Is this anywhere documented? Where I have to set this option?

[FullStackAlex]

Why does this package not work with Encore?
https://github.com/shepherdwind/css-hot-loader

[Lyrkan]

@tech-nomad What @weaverryan meant is that a method could be added to Encore to allow people not to use the extract-text-webpack-plugin/mini-css-extract-plugin when using --dev-server. That method doesn't exist yet.

AFAIK you should be able to use css-hot-loader with Encore, but:

• There's no easy way to add it (see the comments in Add HMR / Hot Support #3... which probably won't work if you use the Webpack 4 version of Encore)
• You'll have to make sure that the versioning is not enabled when using it since the plugin requires that the filenames always stay the same

[FullStackAlex]

Thanks for the info @Lyrkan !
This feature is very important for my development workflow. So maybe it's less stress and work just to use original webpack for my Symfony project in this case?

[beany-vu]

I do agree with the @tech-nomad's opinion, the "live reload" feature or HMR should be available.

[AubreyHewes]

@tech-nomad and all, as a workaround / until it is an option. In my projects I add the following to the webpack.config.js to enable hot style reloading in development. I accept the fact that it is not production css.

...

const cfg = Encore.getWebpackConfig();

if (process.env.NODE_ENV === 'development') {
  // allow HMR of scss/css changes
  // https://github.com/symfony/webpack-encore/issues/348#issuecomment-408631993
  const path = require('path');
  cfg.module.rules = cfg.module.rules.map(rule => {
    if (rule.use && rule.use[0] === path.resolve(__dirname, 'node_modules/mini-css-extract-plugin/dist/loader.js')) {
      rule.use[0] = require.resolve("style-loader");
    }
    return rule;
  });
}

module.exports = cfg;

This changes both the css and scss/sass module rules to use style-loader.

This requires prepending the dev-server script in the package.json
with NODE_ENV=development

    "dev-server": "NODE_ENV=development encore dev-server --hot",

And requires adding style-loader to the dependencies

[Naskalin]

@AubreyHewes Thanks for the solution, just add, it also works for me without updating package.json if you will check !Encore.isProduction() instead process.env.NODE_ENV === 'development'

if (!Encore.isProduction()) {
    //your code is here...
}

[Grafikart]

I think this issue can now be close since the commit #539 introduced the requested feature

if (!Encore.isProduction()) {
  Encore.disableCssExtraction()
}

Then, the command

./node_modules/.bin/encore dev-server --hot

Works as expected

[Kocal]

Maybe this can be added to the webpack.config.js file from the recipe?

[Lyrkan]

Maybe this can be added to the webpack.config.js file from the recipe?

I'd prefer to merge #564 since it should then work natively with the mini-css-extract-plugin, but sadly it's still blocked because of inconsistent hashes :(

Anyway, if we do add Encore.disableCssExtraction() to the recipe, maybe the check should be on Encore.isDevServer() instead of !Encore.isProduction()?

[Kocal]

Yes, I was thinking about using Encore.isDevServer()