access SASS values ($colors from variables.scss) in Typescript (Angular2 ionic2) : <p>In Ionic 2, I would like to access the <code>$colors</code> variables from the file "[my project]\src\theme\variables.scss".</p>

<p>This file contains:</p>

<pre><code>$colors: (
  primary:    #387ef5,
  secondary:  #32db64,
  danger:     #f53d3d,
  light:      #f4f4f4,
  dark:       #222,
  favorite:   #69BB7B
);
</code></pre>

<p>In a component, I draw a canvas. It looks like that:</p>

<pre><code>import {Component, Input, ViewChild, ElementRef} from '@angular/core';

@Component({
    selector: 'my-graph',
})
@View({
    template: `&lt;canvas #myGraph class='myGraph'
     [attr.width]='_size'
     [attr.height]='_size'&gt;&lt;/canvas&gt;`,
})

export class MyGraphDiagram {
    private _size: number;

    // get the element with the #myGraph on it
    @ViewChild("myGraph") myGraph: ElementRef; 

    constructor(){
        this._size = 150;
    }

    ngAfterViewInit() { // wait for the view to init before using the element

      let context: CanvasRenderingContext2D = this.myGraph.nativeElement.getContext("2d");
      // HERE THE COLOR IS DEFINED AND I D LIKE TO ACCESS variable.scss TO DO THAT
      context.fillStyle = 'blue';
      context.fillRect(10, 10, 150, 150);
    }

}
</code></pre>

<p>As one can see, at some point in this code the color of the shape is defined:          <code>context.fillStyle = 'blue'</code> , I would like to use instead something like <code>context.fillStyle = '[variables.scss OBJECT].$colors.primary '</code>.</p>

<p>Has anyone an idea?</p>
