fix(css): emit css sourcemaps only when extracting

This addresses a limitation with `style-loader` where asset urls would not be generated correctly.

Fix angular#4273

Author: filipesilva

packages/angular-cli/models/webpack-configs/styles.ts

@@ -33,6 +33,10 @@ export function getStylesConfig(wco: WebpackConfigOptions) {
   const entryPoints: { [key: string]: string[] } = {};
   const globalStylePaths: string[] = [];
   const extraPlugins: any[] = [];
+  // style-loader does not support sourcemaps without absolute publicPath, so it's
+  // better to disable them when not extracting css
+  // https://github.com/webpack-contrib/style-loader#recommended-configuration
+  const cssSourceMap = buildOptions.extractCss && buildOptions.sourcemap;
 
   // discard comments in production
   const extraPostCssPlugins = buildOptions.target === 'production'
@@ -75,7 +79,7 @@ export function getStylesConfig(wco: WebpackConfigOptions) {
     // so we need to add options in its query
     {
       test: /\.styl$/, loaders: [`stylus-loader?${JSON.stringify({
-        sourceMap: buildOptions.sourcemap,
+        sourceMap: cssSourceMap,
         paths: includePaths
       })}`]
     }
@@ -95,7 +99,7 @@ export function getStylesConfig(wco: WebpackConfigOptions) {
         loader: [
           // css-loader doesn't support webpack.LoaderOptionsPlugin properly,
           // so we need to add options in its query
-          `css-loader?${JSON.stringify({ sourceMap: buildOptions.sourcemap })}`,
+          `css-loader?${JSON.stringify({ sourceMap: cssSourceMap })}`,
           ...commonLoaders,
           ...loaders
         ],
@@ -121,14 +125,14 @@ export function getStylesConfig(wco: WebpackConfigOptions) {
         disable: !buildOptions.extractCss
       }),
       new webpack.LoaderOptionsPlugin({
-        sourceMap: true,
+        sourceMap: cssSourceMap,
         options: {
           postcss: [autoprefixer()].concat(extraPostCssPlugins),
           // css-loader, stylus-loader don't support LoaderOptionsPlugin properly
           // options are in query instead
-          sassLoader: { sourceMap: buildOptions.sourcemap, includePaths },
+          sassLoader: { sourceMap: cssSourceMap, includePaths },
           // less-loader doesn't support paths
-          lessLoader: { sourceMap: buildOptions.sourcemap },
+          lessLoader: { sourceMap: cssSourceMap },
           // context needed as a workaround https://github.com/jtangelder/sass-loader/issues/285
           context: projectRoot,
         },