stylePreprocessorOptions.includePathts Configuration isn't working with Sass

I’ve setup the stylePreprocessorOptions.includePathts configuration to include my Bower components and the settings are ignored.

OS?

macOS Sierra (v10.12.3)

Versions.

@angular/cli: 1.0.0-rc.0

Repro steps.

Added Bower Package Manager

The log given by the failure.

ERROR in ./~/css-loader?{"sourceMap":false,"importLoaders":1}!./~/postcss-loader!./~/sass-loader!./src/styles.scss
Module build failed:
@import '~foundation';
^
      File to import not found or unreadable: ~foundation.
Parent style sheet: stdin
      in /data/src/styles.scss (line 5, column 1)
 @ ./src/styles.scss 4:14-195
 @ multi ./src/styles.scss
webpack: Failed to compile.
webpack: Compiling...
Hash: f2223248bed1092fe792
Time: 2038ms
chunk    {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 153 kB {4} [initial]
chunk    {1} main.bundle.js, main.bundle.js.map (main) 175 kB {3} [initial]
chunk    {2} styles.bundle.js, styles.bundle.js.map (styles) 8.4 kB {4} [initial] [rendered]
chunk    {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 3.46 MB [initial]
chunk    {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry]

Mention any other details that might be useful.

.angular-cli.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "quickstart"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "starfish",
      "styles": [
        "styles.scss"
      ],
      "stylePreprocessorOptions": {
        "includePaths": [
          "src/bower_components/foundation-sites/scss"
        ]
      },
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json"
    },
    {
      "project": "src/tsconfig.spec.json"
    },
    {
      "project": "e2e/tsconfig.e2e.json"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "scss",
    "component": {}
  }
}

The important part is:

"stylePreprocessorOptions": {
        "includePaths": [
          "src/bower_components/foundation-sites/scss"
        ]
      },

./src/styles.scss

@charset "utf-8";

@import 'foundation';

The Bower files are found in ./src/bower_components

It seems like the configuration is incorrect or the compiler is ignore these settings and is unable to resolve the Sass file (foundation).

Please help, thanks!

p.s. I’m able to compile using the relative paths, but:

@import 'bower_components/foundation-sites/scss/foundation';

is not as readable as:

@import foundation