feat(new): include app level import paths for style preprocessors

fixed linter errors

re-run build-config-interface

Author: admosity

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

@@ -12,7 +12,7 @@ export interface CliConfig {
     apps?: {
         root?: string;
         outDir?: string;
-        assets?: string;
+        assets?: string | string[];
         deployUrl?: string;
         index?: string;
         main?: string;
@@ -23,17 +23,32 @@ export interface CliConfig {
         /**
          * Global styles to be included in the build.
          */
-        styles?: string[];
+        styles?: (string | {
+            [name: string]: any;
+            input?: string;
+        })[];
         /**
          * Global scripts to be included in the build.
          */
-        scripts?: string[];
+        scripts?: (string | {
+            [name: string]: any;
+            input?: string;
+        })[];
         /**
          * Name and corresponding file for environment config.
          */
         environments?: {
             [name: string]: any;
         };
+        /**
+         * Options to pass to style loaders in webpack.
+         */
+        webpackStyleLoaderOptions?: {
+            /**
+             * Paths to include. Paths will be resolved to project root.
+             */
+            includePaths?: string[];
+        };
     }[];
     /**
      * Configuration reserved for installed third party addons.

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

@@ -113,6 +113,21 @@
             "description": "Name and corresponding file for environment config.",
             "type": "object",
             "additionalProperties": true
+          },
+          "webpackStyleLoaderOptions": {
+            "description": "Options to pass to style loaders in webpack.",
+            "type": "object",
+            "properties": {
+              "includePaths": {
+                "description": "Paths to include. Paths will be resolved to project root.",
+                "type": "array",
+                "items": {
+                  "type": "string"
+                },
+                "default": []
+              }
+            },
+            "additionalProperties": false
           }
         },
         "additionalProperties": false

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

@@ -5,8 +5,11 @@ import { SuppressEntryChunksWebpackPlugin } from '../plugins/suppress-entry-chun
 import { packageChunkSort } from '../utilities/package-chunk-sort';
 import { BaseHrefWebpackPlugin } from '@angular-cli/base-href-webpack';
 import { extraEntryParser, makeCssLoaders } from './webpack-build-utils';
+import { CliConfig } from '../lib/config/schema.d';
+
 
 const autoprefixer = require('autoprefixer');
+const postcssDiscardComments = require('postcss-discard-comments');
 const ProgressPlugin = require('webpack/lib/ProgressPlugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const SilentError = require('silent-error');
@@ -27,6 +30,7 @@ export function getWebpackCommonConfig(
   projectRoot: string,
   environment: string,
   appConfig: any,
+  cliConfig: CliConfig,
   baseHref: string,
   sourcemap: boolean,
   vendorChunk: boolean,
@@ -46,6 +50,39 @@ export function getWebpackCommonConfig(
     main: [appMain]
   };
 
+  // Configure webpack style loaders
+
+  /**
+   * Base settings for webpack style loaders
+   * @type {Object}
+   */
+  const baseStyleLoaderOptions = {
+    sourceMap: sourcemap,
+  };
+
+  // set default to base
+  let styleLoaderOptions = baseStyleLoaderOptions;
+
+  if (appConfig.webpackStyleLoaderOptions) {
+    if (appConfig.webpackStyleLoaderOptions.includePaths) {
+      // resolve paths relative to project root
+      let includePaths = appConfig.webpackStyleLoaderOptions.includePaths.map(
+        (includePath: string) => path.resolve(projectRoot, includePath)
+      );
+      if (cliConfig.defaults.styleExt === 'styl')  {
+        // stylus uses paths
+        styleLoaderOptions = Object.assign({}, baseStyleLoaderOptions, {
+          paths: includePaths
+        });
+      } else {
+        // less and sass use includePaths
+        styleLoaderOptions = Object.assign({}, baseStyleLoaderOptions, {
+          includePaths
+        });
+      }
+    }
+  }
+
   if (!(environment in appConfig.environments)) {
     throw new SilentError(`Environment "${environment}" does not exist.`);
   }
@@ -163,11 +200,15 @@ export function getWebpackCommonConfig(
       new webpack.LoaderOptionsPlugin({
         test: /\.(css|scss|sass|less|styl)$/,
         options: {
-          postcss: [autoprefixer()],
-          cssLoader: { sourceMap: sourcemap },
-          sassLoader: { sourceMap: sourcemap },
-          lessLoader: { sourceMap: sourcemap },
-          stylusLoader: { sourceMap: sourcemap },
+          postcss: [
+            autoprefixer(),
+            // NOTE: Moved check here for prod build
+            ...(environment === 'prod' ? [postcssDiscardComments] : [])
+          ],
+          cssLoader: styleLoaderOptions,
+          sassLoader: styleLoaderOptions,
+          lessLoader: styleLoaderOptions,
+          stylusLoader: styleLoaderOptions,
           // context needed as a workaround https://github.com/jtangelder/sass-loader/issues/285
           context: projectRoot,
         },

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

@@ -2,8 +2,6 @@ import * as path from 'path';
 import * as webpack from 'webpack';
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
 import {CompressionPlugin} from '../lib/webpack/compression-plugin';
-const autoprefixer = require('autoprefixer');
-const postcssDiscardComments = require('postcss-discard-comments');
 
 declare module 'webpack' {
   export interface LoaderOptionsPlugin {}
@@ -44,22 +42,6 @@ export const getWebpackProdConfigPartial = function(projectRoot: string,
           test: /\.js$|\.html$|\.css$/,
           threshold: 10240
       }),
-      // LoaderOptionsPlugin needs to be fully duplicated because webpackMerge will replace it.
-      new webpack.LoaderOptionsPlugin({
-        test: /\.(css|scss|sass|less|styl)$/,
-        options: {
-          postcss: [
-            autoprefixer(),
-            postcssDiscardComments
-          ],
-          cssLoader: { sourceMap: sourcemap },
-          sassLoader: { sourceMap: sourcemap },
-          lessLoader: { sourceMap: sourcemap },
-          stylusLoader: { sourceMap: sourcemap },
-          // context needed as a workaround https://github.com/jtangelder/sass-loader/issues/285
-          context: projectRoot,
-        }
-      })
     ]
   };
 };

packages/angular-cli/models/webpack-config.ts

@@ -44,6 +44,7 @@ export class NgCliWebpackConfig {
       this.ngCliProject.root,
       environment,
       appConfig,
+      config.config,
       baseHref,
       sourcemap,
       vendorChunk,