Open lichnow opened 6 years ago
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.
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?
Why does this package not work with Encore? https://github.com/shepherdwind/css-hot-loader
@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:
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?
I do agree with the @Tech-Nomad's opinion, the "live reload" feature or HMR should be available.
@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
@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...
}
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
Maybe this can be added to the webpack.config.js
file from the recipe?
Maybe this can be added to the webpack.config.js file from the recipe?
I'd prefer to merge https://github.com/symfony/webpack-encore/pull/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()
?
Yes, I was thinking about using Encore.isDevServer()
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 methodisDevServer
to check if in dev-server?