diff --git a/packages/angular-cli/blueprints/ng2/files/angular-cli.json b/packages/angular-cli/blueprints/ng2/files/angular-cli.json index 3de359c217ea..7eaa8b4e0340 100644 --- a/packages/angular-cli/blueprints/ng2/files/angular-cli.json +++ b/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", diff --git a/packages/angular-cli/lib/config/schema.d.ts b/packages/angular-cli/lib/config/schema.d.ts index c1fd6850d710..c7bfe733d3a0 100644 --- a/packages/angular-cli/lib/config/schema.d.ts +++ b/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. */ diff --git a/packages/angular-cli/lib/config/schema.json b/packages/angular-cli/lib/config/schema.json index b02dbb6c1026..8b4b06010c5c 100644 --- a/packages/angular-cli/lib/config/schema.json +++ b/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", diff --git a/packages/angular-cli/models/webpack-build-development.ts b/packages/angular-cli/models/webpack-build-development.ts index 4dbaf65e116b..5023b81072fc 100644 --- a/packages/angular-cli/models/webpack-build-development.ts +++ b/packages/angular-cli/models/webpack-build-development.ts @@ -1,6 +1,12 @@ const path = require('path'); +import * as webpack from '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: { @@ -9,6 +15,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, diff --git a/packages/angular-cli/models/webpack-build-production.ts b/packages/angular-cli/models/webpack-build-production.ts index cce93ab7868a..ce546256dd69 100644 --- a/packages/angular-cli/models/webpack-build-production.ts +++ b/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 + } } }) ],