Sass with sourcemaps, webpack, and live reloadMonday, August 17, 2015
Two days ago, I would have told you just how much of a poor, poor soul you are. Because it's simply not possible, but the READMEs make you chase the dragon, leading you to believe that it is possible. But alas, no, none of the methods work. After spending hours, you will find out that you can have either source maps, or live reload. Not both. Pick one. But yeah that was two days ago, read on.
So it turns out that it is, in fact, possible, it's just that the README in sass-loader is incorrect, and leads you on a false path:
Source maps Because of browser limitations, source maps are only available in conjunction with the extract-text-webpack-plugin. Use that plugin to extract the CSS code from the generated JS bundle into a separate file (which even improves the perceived performance because JS and CSS are downloaded in parallel).
WRONG. Do not do this. After getting the aforementioned extract-text-plugin to work, which wasn't entirely straightforward, since I was using it with react-hot-loader, and the dev server, and the whatnot, it turns out that live reload does not work. But why, it was working just fine before? So you revert everything, and confirm that live reload works if you don't use extract-text, which leaves you with a choice:
- Use extract-text to get sourcemaps
- Skip extract-text, get live reload, but no source maps
After googling around, I found a closed ticket on the extract-text repository where people talk about this, and there is a note:
This doesn't work. You shoudn't use the extract-text-webpack-plugin in development. Better thread the extract-text-webpack-plugin as production optimiation for the style-loader.
But after asking for confirmation if sourcemaps and live reload is really not possible at the moment with webpack, @sokra comes with the solution:
Doesn't style-loader!css-loader?sourceMap work?
Well, it does not, but after a bit of trial and error, it turns out that if you add it to both the sass loader, and the css loader:
So to recap:
- Do not use extract-text for source maps, it was made for extracting out your CSS/SCSS/etc into separate CSS files
- Do not do what the sass-lodaer README tells you, use what I have shown above
- Require your style from your JS file