在Typescript(Angular2 ionic2)中访问SASS值($ variables.scss中的$ colors)

角度 CSS

梅十三Near

2020-03-19

在Ionic 2中,我想$colors从文件“ [我的项目] \ src \ theme \ variables.scss”中访问变量。

该文件包含:

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

在一个组件中,我绘制了一个画布。看起来像这样:

import {Component, Input, ViewChild, ElementRef} from '@angular/core';

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

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);
    }

}

可以看到,在此代码的某个点上定义了形状的颜色: context.fillStyle = 'blue',我想改用context.fillStyle = '[variables.scss OBJECT].$colors.primary '

有人知道吗?

第2303篇《在Typescript(Angular2 ionic2)中访问SASS值($ variables.scss中的$ colors)》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

0个回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android