Merge pull request #4058 from marshallmick007/master

angular cli with projects assets : root dir not correctly used #3864

Author: igor-dv

app/angular/src/server/angular-cli_config.js

@@ -32,8 +32,8 @@ export function getAngularCliWebpackConfigOptions(dirToSearch) {
   );
 
   return {
-    root: project.root,
-    projectRoot: dirToSearch,
+    root: dirToSearch,
+    projectRoot: path.resolve(dirToSearch, project.root),
     supportES2015: false,
     tsConfig: {
       options: {},

examples/angular-cli/angular.json

@@ -23,8 +23,14 @@
               "src/assets"
             ],
             "styles": [
-              "src/styles.css"
+              "src/styles.css",
+              "src/styles.scss"
             ],
+            "stylePreprocessorOptions": {
+              "includePaths": [
+                "src/commons"
+              ]
+            },
             "scripts": []
           },
           "configurations": {
@@ -119,4 +125,4 @@
     }
   },
   "defaultProject": "angular-cli"
-}
+}

examples/angular-cli/src/commons/_colors.scss

@@ -0,0 +1 @@
+$color: green;

examples/angular-cli/src/styles.css

@@ -1,9 +1,5 @@
 /* You can add global styles to this file, and also import other style files */
 
-.green-color {
-  color: green;
-}
-
 .css-rules-warning {
   display: none;
 }

examples/angular-cli/src/styles.scss

@@ -0,0 +1,8 @@
+/* You can add global styles to this file, and also import other style files */
+
+// should work because of the stylePreprocessorOptions in angular.json
+@import '_colors';
+
+.green-color {
+  color: $color;
+}