accéder aux valeurs SASS ($ colors from variables.scss) dans Typescript (Angular2 ionic2)

Question

Dans Ionic 2, je voudrais accéder aux variables $colors à partir du fichier "[mon projet] \ src \ theme \ variables.scss".

Ce fichier contient:

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

Dans un composant, je dessine une toile. Cela ressemble à ça:

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

}
 

Comme on peut le voir, à un moment donné dans ce code, la couleur de la forme est définie: context.fillStyle = 'blue' , je voudrais utiliser à la place quelque chose comme context.fillStyle = '[variables.scss OBJECT].$colors.primary ' .

Quelqu'un a-t-il une idée?

Answer 1

Malheureusement, il n'y a aucun moyen d'accéder à SASS variable directement à partir de la machine/du code javascript. Cependant, nous pouvons faire une solution de contournement pour accéder à ces variables.

Permettez-moi de décrire brièvement les étapes pour accéder à SASS des variables à partir de l'intérieur de la machine a ecrire le code source:

1. La création d'un SASS aide Composante

Créer ../fournisseurs/sass-helper/sass-helper.composante.scss:

$prefix: "--"; //Prefix string for custom CSS properties

//Merges a variable name with $prefix
@function custom-property-name($name) {
    @return $prefix + $name;
}

// Defines a custom property
@mixin define-custom-property($name, $value) {
    #{custom-property-name($name)}: $value;
}

body {
    // Append pre-defined colors in $colors:
    @each $name, $value in $colors {
        @include define-custom-property($name, $value);
    }

    // Append SASS variables which are desired to be accesible:
    @include define-custom-property('background-color', $background-color);
}

Dans ce fichier SCSS, il suffit de créer des propriétés personnalisées à l'intérieur du corps de la section de la DOM. Vous devez ajouter chaque SASS variable que vous voulez avoir accès à ce fichier SCSS en utilisant le mixin appelés define-custom-property qui attend deux paramètres: nom de la variable et la valeur de la variable.

Comme un exemple, j'ai ajouté les entrées pour toutes les couleurs définies en $colors ainsi que d'une entrée pour le SASS variable $background-color définie dans mon thème/les variables.scss fichier. Vous pouvez ajouter autant de variables que vous le souhaitez.

Créer ../fournisseurs/sass-helper/sass-helper.composante.ts:

import { Component } from '@angular/core';

export const PREFIX = '--';

@Component({
    selector: 'sass-helper',
    template: '<div></div>'
})
export class SassHelperComponent {

    constructor() {

    }

    // Read the custom property of body section with given name:
    readProperty(name: string): string {
        let bodyStyles = window.getComputedStyle(document.body);
        return bodyStyles.getPropertyValue(PREFIX + name);
    }
}

---

2. L'intégration de SASS aide Composante

À partir de maintenant, nous pouvons suivre la norme Ionic2 les principes d'un cadre pour le volet de l'intégration et de l'utilisation.

• Ajouter le composant nom de la classe (SassHelperComponent) dans la section déclarations de votre NgModule en application.le module.ts

• Insérez le code HTML suivant dans le modèle HTML de votre page à partir de laquelle vous souhaitez accéder à ces magiques variables:

  <sass-helper></sass-helper>

---

3. À L'Aide D'Un Helper Component

Dans votre page de fichier TS, vous devez insérer les lignes suivantes dans votre classe de la page:

@ViewChild(SassHelperComponent)
private sassHelper: SassHelperComponent;

Enfin, vous pouvez lire la valeur de tout SASS variable par simplement appeler l'enfant de la méthode de classe comme suit:

// Read $background-color:
this.sassHelper.readProperty('background-color');

// Read primary:
this.sassHelper.readProperty('primary');

Answer 2

Une possibilité est de générer un .ts le fichier à partir de l' .scss le fichier. Un simple exemple de ce processus:

1) Installez npm i --save-dev scss-to-json.

2) Mettez ceci dans votre package.json:

  "scripts": {
    ...
    "scss2json": "echo \"export const SCSS_VARS = \" > src/app/scss-variables.generated.ts && scss-to-json src/variables.scss >> src/app/scss-variables.generated.ts"
  },

et de l'exécuter avec npm run scss2json. Les utilisateurs de Windows auront besoin d'ajuster l'exemple.

3) l'Accès aux variables:

import {SCSS_VARS} from './scss-variables.generated';
...
console.log(SCSS_VARS['$color-primary-1']);

Un avantage de ceci est que vous obtenez le type de l'achèvement de l'IDE et c'est un assez simple moyen pour atteindre votre objectif en général.

Bien sûr, vous pourriez faire de ce plus avancées, par exemple en rendant le fichier généré en lecture seule, et de mettre le script dans sa propre .js le fichier et de le faire fonctionner sur tous les OS.