feat(sass resolve paths) change webpack config to implement sassLoader's includePaths support

Author: ValeryVS

packages/angular-cli/blueprints/ng2/files/angular-cli.json

@@ -20,6 +20,7 @@
       "styles": [
         "styles.<%= styleExt %>"
       ],
+      <% if(styleExt==='sass') { %>"sassPaths": [],<% } %>
       "scripts": [],
       "environments": {
         "source": "environments/environment.ts",

packages/angular-cli/lib/config/schema.d.ts

@@ -23,6 +23,10 @@ export interface CliConfig {
          * Global styles to be included in the build.
          */
         styles?: string[];
+        /**
+         * includePaths array for sass import.
+         */
+        sassPaths?: string[];
         /**
          * Global scripts to be included in the build.
          */

packages/angular-cli/lib/config/schema.json

@@ -66,6 +66,14 @@
             },
             "additionalProperties": false
           },
+          "sassPaths": {
+            "description": "includePaths array for sass import.",
+            "type": "array",
+            "items": {
+              "type": "string"
+            },
+            "additionalProperties": false
+          },
           "scripts": {
             "description": "Global scripts to be included in the build.",
             "type": "array",

packages/angular-cli/models/webpack-build-development.ts

@@ -13,6 +13,10 @@ declare module 'webpack' {
 };
 
 export const getWebpackDevConfigPartial = function(projectRoot: string, appConfig: any) {
+  const appRoot = path.resolve(projectRoot, appConfig.root);
+  const sass = appConfig.sassPaths
+             ? appConfig.sassPaths.map((includePath: string) => path.resolve(appRoot, includePath))
+             : [];
   return {
     devtool: 'cheap-module-source-map',
     output: {
@@ -29,6 +33,9 @@ export const getWebpackDevConfigPartial = function(projectRoot: string, appConfi
             failOnHint: false,
             resourcePath: path.resolve(projectRoot, appConfig.root)
           },
+          sassLoader: {
+            includePaths: sass
+          }
         }
       })
     ],

packages/angular-cli/models/webpack-build-production.ts

@@ -4,6 +4,10 @@ const CompressionPlugin = require('compression-webpack-plugin');
 import * as webpack from 'webpack';
 
 export const getWebpackProdConfigPartial = function(projectRoot: string, appConfig: any) {
+  const appRoot = path.resolve(projectRoot, appConfig.root);
+  const sass = appConfig.sassPaths
+             ? appConfig.sassPaths.map((includePath: string) => path.resolve(appRoot, includePath))
+             : [];
   return {
     devtool: 'source-map',
     output: {
@@ -46,7 +50,10 @@ export const getWebpackProdConfigPartial = function(projectRoot: string, appConf
           },
           postcss: [
             require('postcss-discard-comments')
-          ]
+          ],
+          sassLoader: {
+            includePaths: sass
+          }
         }
       })
     ],