SCSS variables declared in app's index.scss not recognised in component's scss files

[RohitRane]

Description

Although this scaffolding provides support for sass. It's not possible to leverage the $variable feature of sass unless you import every individual component scss file into the index.scss.

If I do :
@component({
selector: 'home',
template: require('./home.component.html'),
styles: [ String(require('./home.component.scss')) ]
})

as suggested in issue #72

But this too fails to identify global sass variables.

Error Message & Stack Trace

I am getting error as :

ERROR in .//css-loader!.//sass-loader!./~/postcss-loader!./src/app/.../component/style.scss
Module build failed:
background-color: $app_bg
^
Undefined variable: "$app-bg".
in /Application/src/app/.../component/style.scss (line 2, column 23)
@ ./src/app/.../component/style.scss 4:14-194
@ ./src/app/.../component/index.ts
@ ./src/app/.../index.ts
@ ./src/app/routes.ts
@ ./src/app/index.ts
@ ./src/index.ts

Config

{
"generator-fountain-angular2": {
"version": "1.0.0-rc1",
"props": {
"framework": "angular2",
"modules": "webpack",
"js": "typescript",
"ci": [],
"css": "scss",
"resolved": "/home/user/.local/install/node/lib/node_modules/generator-fountain-webapp/node_modules/generator-fountain-angular2/generators/app/index.js",
"namespace": "fountain-angular2",
"argv": {
"remain": [],
"cooked": [],
"original": []
},
"sample": "hello",
"router": "router"
}
}
}

Environment

node v6.9.2
yo v1.8.5
npm v3.10.9

[RohitRane]

I was able to resolve this issue by creating a global _variables.scss partial and importing this into each component.scss.