stylePreprocessorOptions.includePathts Configuration isn't working with Sass #5079
Description
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