search

FountainJS / generator-fountain-angular2

Yeoman 'fountain' generator to start a webapp with Angular 2
http://fountainjs.io
MIT License
81 stars 19 forks source link

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

Closed RohitRane closed 7 years ago

RohitRane commented 7 years ago

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 commented 7 years ago

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