Can't access Sass Global Variables in components scss

[paramsingh88]

I have a habit of importing my _variables.scss and _mixins.scss into my root src/style.scss file

@import 'styles/base/_variables.scss';
@import 'styles/base/_mixins.scss';
@import 'styles/helpers/flexbox.scss';
* {
    padding: 0;
    margin: 0;
}

body{
	padding: 4%;
	font-family: sans-serif;
}

But when I'm trying to access the variables in my components.scss, it's giving me an error
color: $primary-color;

Isn't there a way I can achieve this simply? Please Help.

[grizzm0]

You need to include styles/base/_variables.scss in each and every file where you need to use variables. Same goes for mixins. The actual content of those files will not be included in the final build and wont impact the build size in any way.

[filipesilva]

For now the solution is as @grizzm0 says.

Dupe-ish of #1791, work in progress in #2747.

[JustasKuizinas]

Seriously there is no better way for this?

[ciel]

This is how SCSS has always worked. It really has nothing to do with the Angular CLI. The component's CSS is being compiled by itself - the other files aren't there. There's no reason for them to be there.

This is not only how it works, this is how you should WANT it to work. You don't want coupling with monolithic styles. You WANT each component to be a COMPONENT. They are isolated, encapsulated pieces of logic.

[rossanmol]

Add this to .angular-cli.sjon (change includePath to your path):

"stylePreprocessorOptions": {
        "includePaths": [
          "../node_modules/bootstrap/scss/"
        ]
      },

[dewwwald]

@JustasKuizinas if you want you can:

• Ditch SASS and use css vars.

• write a service that create css variables in style element in the head.

• Get variables for the head style service from a js config

• reuse same ts config in your template / ts code

• When building your project with webpack use pure css with autoprefixer
  or

• use the same approach as mentioned above with no variables for color / sizes configured if you van the benifits of the pre processor

More on this here:
https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables

As mentioned above this is not an angular issue but more of a seed (project base that use angular) issue (with all the build processes and pre-processing pre-dictated by the author).

[AlexanderKozhevin]

Looks like we just need to duplicate in every component.

@import "~style/variables";

[grizzm0]

@AlexanderKozhevin Exactly. Just like you need to import anything you use in typescript you also need to import anything you use in SCSS.

[dewwwald]

I can make another recommendation on this.

I am buzzy building a framework that will have no classes, only placeholders, mixins and variables. You can import this in the tag and write your sass as per usual but for the component.

My afore mentioned solution has some problems, for example css has not loops and ifs. Therefore it is better to just use sass.

You can then import base styles like import grid or responsive-grid in you app component (root component).

[GuskiS]

Well, there is this loader that could resolve all our problems - https://github.com/shakacode/sass-resources-loader
I've been using it in one of the ejected projects, but will be nice if we could do this directly from CLI.

[jsonberry]

@GuskiS Yep, sass resources loader is great, but out of the box ng cli karma config will fail with it. SASS vars will not get picked up, but during a build and development it will work.

...Currently trying to figure out to get my tests to pass with it 🤔

[dewwwald]

@GuskiS that looks like the best option, combining that with importing sass modules using angular's styleUrls: [] has turned out to be my solution to the problem.

Again, as always, setup usually depends on your project.

[aoakeson]

My current solution is to turn off ViewEncapsulation for the component, but I dont like this at all. I wish there was a clean solution for this.

@component({
selector: 'app-admin',
templateUrl: './admin.component.html',
encapsulation: ViewEncapsulation.None,
styleUrls: ['./admin.component.scss']
})

[dewwwald]

@aoakeson, form my understanding, that is based on experience and not the actual algorithm, view encapsulation only applies when styling is applied to a class specific to that component. I haven't had to turn on viewEncapsulation for any of my component. The global stylesheets just seem to apply.

I am curious to know why this is different for you.