From 6ee69826bdd5096701a5a9ba28781a82700b15e9 Mon Sep 17 00:00:00 2001
From: JPeer264 <jan.oster94@gmail.com>
Date: Mon, 31 Jul 2017 14:33:44 +0200
Subject: [PATCH 1/2] feat(@angular/cli): support includePaths for less (closes
 #7083)

---
 .../cli/models/webpack-configs/styles.ts      |  3 ++-
 tests/e2e/tests/build/styles/include-paths.ts | 20 ++++++++++++++++---
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/packages/@angular/cli/models/webpack-configs/styles.ts b/packages/@angular/cli/models/webpack-configs/styles.ts
index a0da10fb6494..bb968e435aee 100644
--- a/packages/@angular/cli/models/webpack-configs/styles.ts
+++ b/packages/@angular/cli/models/webpack-configs/styles.ts
@@ -135,7 +135,8 @@ export function getStylesConfig(wco: WebpackConfigOptions) {
     { test: /\.less$/, use: [{
         loader: 'less-loader',
         options: {
-          sourceMap: cssSourceMap
+          sourceMap: cssSourceMap,
+          paths: includePaths
         }
       }]
     },
diff --git a/tests/e2e/tests/build/styles/include-paths.ts b/tests/e2e/tests/build/styles/include-paths.ts
index 92ead1cd2687..8b626f348372 100644
--- a/tests/e2e/tests/build/styles/include-paths.ts
+++ b/tests/e2e/tests/build/styles/include-paths.ts
@@ -30,15 +30,25 @@ export default function () {
       @import 'variables'
       h4
         background-color: $primary-color
+    `,
+      'src/style-paths/variables.less': '@primary-color: #ADD;',
+      'src/styles.less': `
+      @import 'variables';
+      h5 { color: @primary-color; }
+    `,
+      'src/app/app.component.less': `
+      @import 'variables';
+      h6 { color: @primary-color; }
     `
     }))
     .then(() => replaceInFile('src/app/app.component.ts', `'./app.component.css\'`,
-      `'./app.component.scss', './app.component.styl'`))
+      `'./app.component.scss', './app.component.styl', './app.component.less'`))
     .then(() => updateJsonFile('.angular-cli.json', configJson => {
       const app = configJson['apps'][0];
       app['styles'] = [
         'styles.scss',
-        'styles.styl'
+        'styles.styl',
+        'styles.less'
       ];
       app['stylePreprocessorOptions'] = {
         includePaths: [
@@ -52,9 +62,13 @@ export default function () {
     .then(() => expectFileToMatch('dist/main.bundle.js', /h2.*{.*color: red;.*}/))
     .then(() => expectFileToMatch('dist/styles.bundle.css', /h3\s*{\s*color: #008000;\s*}/))
     .then(() => expectFileToMatch('dist/main.bundle.js', /h4.*{.*color: #008000;.*}/))
+    .then(() => expectFileToMatch('dist/styles.bundle.css', /h5\s*{\s*color: #ADDADD;\s*}/))
+    .then(() => expectFileToMatch('dist/main.bundle.js', /h6.*{.*color: #ADDADD;.*}/))
     .then(() => ng('build', '--extract-css', '--aot'))
     .then(() => expectFileToMatch('dist/styles.bundle.css', /h1\s*{\s*color: red;\s*}/))
     .then(() => expectFileToMatch('dist/main.bundle.js', /h2.*{.*color: red;.*}/))
     .then(() => expectFileToMatch('dist/styles.bundle.css', /h3\s*{\s*color: #008000;\s*}/))
-    .then(() => expectFileToMatch('dist/main.bundle.js', /h4.*{.*color: #008000;.*}/));
+    .then(() => expectFileToMatch('dist/main.bundle.js', /h4.*{.*color: #008000;.*}/))
+    .then(() => expectFileToMatch('dist/styles.bundle.css', /h5\s*{\s*color: #ADDADD;\s*}/))
+    .then(() => expectFileToMatch('dist/main.bundle.js', /h6.*{.*color: #ADDADD;.*}/));
 }

From f17194671331649b09f7212795d6e13cf7f78f7f Mon Sep 17 00:00:00 2001
From: JPeer264 <jan.oster94@gmail.com>
Date: Mon, 31 Jul 2017 15:05:20 +0200
Subject: [PATCH 2/2] fix(@angular/cli): change less variable

---
 tests/e2e/tests/build/styles/include-paths.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/e2e/tests/build/styles/include-paths.ts b/tests/e2e/tests/build/styles/include-paths.ts
index 8b626f348372..754ee04da397 100644
--- a/tests/e2e/tests/build/styles/include-paths.ts
+++ b/tests/e2e/tests/build/styles/include-paths.ts
@@ -31,7 +31,7 @@ export default function () {
       h4
         background-color: $primary-color
     `,
-      'src/style-paths/variables.less': '@primary-color: #ADD;',
+      'src/style-paths/variables.less': '@primary-color: #ADDADD;',
       'src/styles.less': `
       @import 'variables';
       h5 { color: @primary-color; }