Using global scss variables in my components styles.

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.

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

@a5hik

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

@AmarildoK

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.

Yup. Certainly need this feature.

Still nothing?

Any update about this people?

Any update on this?

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.

Switched to Sass from CSS. Broke everything. Discussion active here: a…

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

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

is that correct?

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

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

@greenchapter

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

@daniel-seitz

@daniel-seitz perhaps a bit of confusion -- this issue is going over many different topics.

Using @import “~variables.scss”; is great if your scss is inside of a folder within node_modules (unmodifiable).

Adding scss paths into angular.cli.json is required if you want "simple" imports for scss that are defined in your project.

Without adding the appropriate scss path(s) into angular.cli.json you will have to do relative path imports.
For example:
@import "./src/assets/private/sass/base"; should be simplified into @import "base";
(assuming you've added the correct entry into .angular.cli.json)

As for automagically importing variables or base into all scss files, that may be a nice feature.
It could be done similar to this comment:
webpack/sass-loader#218 (comment)

I do think if this feature was added it would need to be a new property of .angular.cli.json.

@hellofornow

Thank you for the reply @hellofornow. I too would welcome this feature however from my current understanding its not trivial to implement this.

I was not clear enough with my question for you, so one clarification: Look out for the ~ symbol.

If one just imports like this @import “variables.scss”;, then yes this file needs to be inside node_modules - which is bad, don't do this.

BUT! if you do @import “~variables.scss”;, so with a ~, then you can import relative to your src folder. That's it, no other config. (Since we're in the angular-cli repo here I won't go into other structures and what we need to configure that 'home'-path)

Keeping that in mind, what's the need to do this then? I found no documentation.

"stylePreprocessorOptions": {
    "includePaths": [
        "scss"
    ]
}

Then I also did some tests (also with lazy loaded modules, ...) and - as we all know - we would not expect this to happen: Angular CLI with Sass compilation encapsulates the styles so that they won't have effects on other parts of the system.

When using import, we circumvent this and can use all variables, however when mixing variables with real css we also can cascade.

PROBLEM here is that each time use import, that 'real css' gets into the resulting file inline, over and over - which again goes against cascading and worse, makes our dist bigger.

The SOLUTION would be to make the variables (mixins, ...) available to the compilation so that it just knows about them and translating on the fly, nothing else.

I'd like to have these variables, or at least the starting point, in src/styles.scss as it is default but likely needs to be configurable.

If I find the time, I will dig deeper as I know that it's not just us who want this...

Am I wrong or AlexHenkel's comment on Jan 23 solves the problem ?

I have my _variables.scss defined

$primary:rgb(211, 14, 127) !default;

So then I can use this variable in a component

.navbar-light .navbar-nav .active a::after {
    border-bottom: 5px solid var(--primary);
  }

.user-view
{
    background-color: var(--primary);
    color: white;
}

To clarify, my styles.scss looks like:

@import 'variables';
@import '../node_modules/bootstrap/scss/bootstrap';

not sure if OP had same problem but works for me, cause I don't have to hard code the default color

Sorry if this is off topic, but per my understanding in this thread, it seems that SASS process files more in isolation, then say LESS did, would that be correct?

In essence, the use case is of being able to use a @mixin which sets some color variables in one file at an "app" level, and hope for that cascade down into all the other components (even if node_modules).

variables.css

$color: 'green';
$theme: 'generic';

@mixin setTheme($theme: 'generic') {
  @if($theme == 'a') {
    $color:  red;
  }

  @if($theme == 'b') {
    $color: blue;
  }
}

app.component.css

@import "~bootstrap/scss/bootstrap.scss";
@import "./styles/variables.scss";

@include setTheme('a');

header.component.css

@import "./styles/variables.scss";

@include setTheme('a');  // only changes red if this is set manually, which is hardcoded and not ideal for a reusable component from npm

h1 {
  color: $color;
}

In this case, anything processed in my app component using $color would change red, but anything in my other components would not change color (would stay the default color of green) unless I manually call setTheme in all my components, which doesn't make them very reusable.

Thanks, and hope that wasn't too confusing! Any thoughts would be greatly appreciated!

I was able to get something working for my use case using sass-vars-loader.

Just an FYI, it looks like using the tilde to reference 'src' from the component level ala @import '~scss/variables'; is buggy (not working) in Angular 6 (issue). @import '~src/scss/variables'; and @import './src/scss/variables'; seem to work, though. Just a PSA if anyone runs into problems.

I can't believe how difficult Angular makes using SASS. I'm about to switch to React/webpack

this is ONE OF THE MOST COMMON THINGS I CAN IMAGINE. How can you get that wrong?!

also: you can make this work easily via webpack and sass-loader itself. Man it would be great if ng cli offered a way to extend the webpack conf out of the box. Like Vue does.

Guys this is how sass/scss works and has nothing todo with Angular. Just import your variables and you are good to go OR use a global stylesheets file.

So, in conclusion, if you @import something but you doesn't use a var or mixing of that thing you've imported, it isn't included in the final bundle, right?

Is there a way to use sass variables globally without the need to manually import in every single component? Perhaps this would be bad practice anyway as every component then has access, even if t doesn't need it...

Do one thing. It will work.
import variable.scss file in the component where you want to use variables, it will work.
This is not standard, if something standard arrives, it is easily undo-able.

What if i want separate css bundles, that i can switch at runtime, each bundle using its own _variables.scss?

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

Navigation Menu

Using global scss variables in my components styles. #1253

23 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Using global scss variables in my components styles. #1253

Description

Activity

filipesilva commented on Jul 4, 2016

AmarildoK commented on Jul 15, 2016

pramttl commented on Jul 16, 2016

purushottamjha commented on Oct 2, 2016

MateuszG commented on Nov 18, 2016

mhmo91 commented on Nov 20, 2016

pquarme commented on Dec 1, 2016

jammerware commented on Dec 1, 2016

ahmed-musallam commented on Jan 17, 2017

greenchapter commented on Jan 18, 2017

origin1tech commented on Feb 3, 2017

ahmed-musallam commented on Feb 3, 2017

23 remaining items

amirtoole commented on Mar 27, 2018

daniel-seitz commented on Apr 18, 2018

IgorceJovanoski commented on May 8, 2018

thescientist13 commented on Sep 4, 2018

thescientist13 commented on Sep 4, 2018

peterankelein commented on Oct 4, 2018

rdalfonso commented on Feb 16, 2019

ManuelGraf commented on Feb 27, 2019

MickL commented on Feb 27, 2019

futbolsalas15 commented on Mar 29, 2019

cmacdonnacha commented on Apr 15, 2019

nikhilknoldus commented on Jun 21, 2019

batousik commented on Sep 12, 2019

angular-automatic-lock-bot commented on Oct 13, 2019

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions