From 050e480dd2ee1428c5703f51caccb0779d58c864 Mon Sep 17 00:00:00 2001
From: Mike Peters <mpeters@boundstatesoftware.com>
Date: Thu, 24 Nov 2016 11:50:27 -0800
Subject: [PATCH] fix(webpack): fix css sourceMap option

CSS source maps were not correctly generated because `sourceMap` option is case sensitive.
Also several workarounds are necessary with LoaderOptionsPlugin.
---
 .../angular-cli/models/webpack-build-common.ts   |  8 +++++++-
 .../models/webpack-build-development.ts          |  8 ++++----
 .../models/webpack-build-production.ts           | 16 +++++++++++-----
 3 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/packages/angular-cli/models/webpack-build-common.ts b/packages/angular-cli/models/webpack-build-common.ts
index d81e3c44ebb1..476698edb9fe 100644
--- a/packages/angular-cli/models/webpack-build-common.ts
+++ b/packages/angular-cli/models/webpack-build-common.ts
@@ -119,7 +119,13 @@ export function getWebpackCommonConfig(
       new webpack.LoaderOptionsPlugin({
         test: /\.(css|scss|sass|less|styl)$/,
         options: {
-          postcss: [ autoprefixer() ]
+          postcss: [ autoprefixer() ],
+          // workaround for https://github.com/webpack/css-loader/issues/340
+          context: path.resolve(__dirname, './'),
+          // workaround for https://github.com/jtangelder/sass-loader/issues/298
+          output: {
+            path: path.resolve(projectRoot, appConfig.outDir)
+          }
         },
       }),
     ],
diff --git a/packages/angular-cli/models/webpack-build-development.ts b/packages/angular-cli/models/webpack-build-development.ts
index d38748abdf2a..820108dea992 100644
--- a/packages/angular-cli/models/webpack-build-development.ts
+++ b/packages/angular-cli/models/webpack-build-development.ts
@@ -5,7 +5,7 @@ export const getWebpackDevConfigPartial = function(projectRoot: string, appConfi
   const styles = appConfig.styles
                ? appConfig.styles.map((style: string) => path.resolve(appRoot, style))
                : [];
-  const cssLoaders = ['style-loader', 'css-loader?sourcemap', 'postcss-loader'];
+  const cssLoaders = ['style-loader', 'css-loader?sourceMap', 'postcss-loader'];
   return {
     output: {
       path: path.resolve(projectRoot, appConfig.outDir),
@@ -23,15 +23,15 @@ export const getWebpackDevConfigPartial = function(projectRoot: string, appConfi
         }, {
           include: styles,
           test: /\.styl$/,
-          loaders: [...cssLoaders, 'stylus-loader?sourcemap']
+          loaders: [...cssLoaders, 'stylus-loader?sourceMap']
         }, {
           include: styles,
           test: /\.less$/,
-          loaders: [...cssLoaders, 'less-loader?sourcemap']
+          loaders: [...cssLoaders, 'less-loader?sourceMap']
         }, {
           include: styles,
           test: /\.scss$|\.sass$/,
-          loaders: [...cssLoaders, 'sass-loader?sourcemap']
+          loaders: [...cssLoaders, 'sass-loader?sourceMap']
         },
       ]
     }
diff --git a/packages/angular-cli/models/webpack-build-production.ts b/packages/angular-cli/models/webpack-build-production.ts
index 0d52a86a4678..5c1eb4a19284 100644
--- a/packages/angular-cli/models/webpack-build-production.ts
+++ b/packages/angular-cli/models/webpack-build-production.ts
@@ -19,7 +19,7 @@ export const getWebpackProdConfigPartial = function(projectRoot: string, appConf
   const styles = appConfig.styles
                ? appConfig.styles.map((style: string) => path.resolve(appRoot, style))
                : [];
-  const cssLoaders = ['css-loader?sourcemap&minimize', 'postcss-loader'];
+  const cssLoaders = ['css-loader?sourceMap&minimize', 'postcss-loader'];
   return {
     output: {
       path: path.resolve(projectRoot, appConfig.outDir),
@@ -37,15 +37,15 @@ export const getWebpackProdConfigPartial = function(projectRoot: string, appConf
         }, {
           include: styles,
           test: /\.styl$/,
-          loaders: ExtractTextPlugin.extract([...cssLoaders, 'stylus-loader?sourcemap'])
+          loaders: ExtractTextPlugin.extract([...cssLoaders, 'stylus-loader?sourceMap'])
         }, {
           include: styles,
           test: /\.less$/,
-          loaders: ExtractTextPlugin.extract([...cssLoaders, 'less-loader?sourcemap'])
+          loaders: ExtractTextPlugin.extract([...cssLoaders, 'less-loader?sourceMap'])
         }, {
           include: styles,
           test: /\.scss$|\.sass$/,
-          loaders: ExtractTextPlugin.extract([...cssLoaders, 'sass-loader?sourcemap'])
+          loaders: ExtractTextPlugin.extract([...cssLoaders, 'sass-loader?sourceMap'])
         },
       ]
     },
@@ -71,7 +71,13 @@ export const getWebpackProdConfigPartial = function(projectRoot: string, appConf
         options: {
           postcss: [
             require('postcss-discard-comments')
-          ]
+          ],
+          // workaround for https://github.com/webpack/css-loader/issues/340
+          context: path.resolve(__dirname, './'),
+          // workaround for https://github.com/jtangelder/sass-loader/issues/298
+          output: {
+            path: path.resolve(projectRoot, appConfig.outDir)
+          }
         }
       })
     ]