Using global scss variables in my components styles.

[a5hik]

angular-cli: 1.0.0-beta.6
node: 6.2.1
os: darwin x64

Hi I have bootstrap override varaibles.scss, which I want to use as a Global style for my app.

So, I depend on these variables on every component.scss I write. Is there a way I can add a global dependency of variables.scss.

Right now I do import the variables.scss manually in every scss file that require.

[filipesilva]

There isn't any such functionality in the CLI itself, no. There is sass compilation but that's it.

[AmarildoK]

@a5hik A temp fix for that is to make a _varaibles.scss and import where ever you use your variables. Not the cleanest way.

[pramttl]

What @AmarildoK suggested could actually be incorporated as a feature into angular CLI. There could be a shared scss file somewhere and new .scss files in generated components could use have an import line to include the shared scss file by default.

[purushottamjha]

Yup. Certainly need this feature.

[MateuszG]

Still nothing?

[mhmo91]

Any update about this people?

[pquarme]

Any update on this?

[jammerware]

I'm quite new to frontend, but I'm trying to declare some global SCSS vars for my Angular app, and I just want to be sure that it's not intended that what I'm doing should work.

I'm running angular-cli 1.0.0-beta.21. In my angular-cli.json file, in apps[0].styles, I reference my styles.scss file.

styles.scss

@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
@import url('https://fonts.googleapis.com/css?family=Droid+Sans:400,700');
@import '_vars';
@import 'reset';
@import 'global';
@import 'index';

_vars.scss

/* VARIABLES  */
/* brand colors */
$color-accent: #2980b9;
$color-primary: #ecf0f1;
$color-subtle: #aaaaaa;

/* rarity */
$color-rarity-legendary: #4c139d;
$color-rarity-ascended: #fb3e8d;
$color-rarity-exotic: #ffa405;

When I try to reference a variable declared this way in a component's .scss file, the console reports that the variable hasn't been declared.

Is this failing because of something I'm doing wrong, or is this not possible under the current version of the CLI?

Thanks so much for your time and help.

[ahmed-musallam]

can someone explain to me how the SASS transpiling happens?
I assume this happens:

1. ng-cli transpiles global sass file to css
2. find all component specific sass and transpile those to css
3. concatenate all that css

is that correct?

[greenchapter]

I have the same problem with global sass variables. Also the transpile is for me at the moment a blackbox

[origin1tech]

What we do is create a folder called shared and under it a styles folder. We then create our sass there. Finally from your top level component typically "app.component.scss" just import.

@import './shared/styles/default';

Forgot you also on the top level component need to set View Encapsulation.

encapsulation: ViewEncapsulation.None

[ahmed-musallam]

@greenchapter yeah.. I wish there was some good documentation for it. if you find anything, do let me know.