#2 Editing in Inspector/Developer tools.
In my workflow I’m often inspecting an element, viewing the html and css, and making small experimental changes right in the developer tools window. I can see the rendered css and how it affects elements. Here’s a screen cap showing editing p.margin-bottom:
With webpack that’s not an option. The developer tools window doesn’t show the css, it shows the individual scss files and their effects on the element. Main.css is empty, and the sources pane show scss files pulled from dozens of locations. There’s no way to use the developer tools to make experimental edits to the css or look at the rendered css to see what the scss is outputting:
#3 I prefer this method of experimentation because the results are instant. If I am playing with margins I can rapidly try 1rem, 1.5rem, 1.25rem, etc, to find the measure that works best, then return to Atom to enter that number into the scss for render. With webpack each individual change takes 3.4 seconds to compile and another n seconds to reload the page (2015 MacBook Pro 16GB RAM). Rapid experimentation doesn’t seem possible.
Is there something I’m not understanding about best development practices here?