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

@@ -1,6 +1,10 @@
 const path = require('path');
 
 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: {
@@ -9,6 +13,15 @@ export const getWebpackDevConfigPartial = function(projectRoot: string, appConfi
       sourceMapFilename: '[name].map',
       chunkFilename: '[id].chunk.js'
     },
+    plugins: [
+      new webpack.LoaderOptionsPlugin({
+        options: {
+          sassLoader: {
+            includePaths: sass
+          }
+        }
+      })
+    ],
     node: {
       fs: 'empty',
       global: true,

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

@@ -14,6 +14,10 @@ declare module '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: {
@@ -51,7 +55,10 @@ export const getWebpackProdConfigPartial = function(projectRoot: string, appConf
           },
           postcss: [
             require('postcss-discard-comments')
-          ]
+          ],
+          sassLoader: {
+            includePaths: sass
+          }
         }
       })
     ],