access SASS values ($colors from variables.scss) in Typescript (Angular2 ionic2)

Question

In Ionic 2, I would like to access the $colors variables from the file \"[my project]\\src\\theme\\variables.scss\".

This file contains:

Answer 1

I would like to add up something to @mete-cantimur answer.

import {Component, OnInit, ViewEncapsulation} from '@angular/core';

const PREFIX = '--';

@Component({
  selector: 'app-styles-helper',
  templateUrl: './styles-helper.component.html',
  styleUrls: ['./styles-helper.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class StylesHelperComponent implements OnInit {

  ngOnInit(): void {

  }

  readProperty(name: string): string {
    const bodyStyles = window.getComputedStyle(document.body);
    return bodyStyles.getPropertyValue(PREFIX + name);
  }
}

My helper component wasn't being able to modify body styles. Even I set up everything correctly, custom properties were not being saved.

I had to add encapsulation: ViewEncapsulation.None to the component in order to let it modify body styles.

Hope this helps.