feat(webpack-config): generate exact source-maps for css files

[mbehzad]

== Description ==
will generate source-maps for each css output that has the mapping back to the original .scss file

== Closes issue(s) ==

== Changes ==

== Affected Packages ==
webpack-config

[mbehzad]

some additional thoughts:
1- there are slightly different plugins for legacy and module scss rules. What is the reason behind it? and currenlty only the modules config has scss entry in it. what is the use case for the legacy scss rules.

[mbehzad]

2- there is currently a bug in css-loader which re-writes the url(..) and does not update the mapping. which will be then couple of characters off.
when css is minified and everything is in 1 line, this offset could add up when there are are many url()s (e.g. many font-faces with many srces).
to minimize the effect we could disable the cssnano in dev mode so only the font-faces are affected by it. but we already had some bugs that occured when using css minification so it wight be helpfull to have it turned on in dev mode so developers could test / catch the bug.
or add an important comment with line break after the font-faces:

@font-face {
  font-family: "roboto-italic";
  ...
  src: url("../../resources/fonts/roboto-italic/Roboto-Italic-webfont.eot");
}
@font-face {...}
/*!
*/

so the minified css will also have the line break. This could be added by devs in the scss files, or fe-tools provide it automatically as a post-css plugin during the dev build.