Il est possible d'insérer une variable d'environnement angulaire dans scss?

Question

J'essaie de trouver un moyen de changer la façon dont mon scss est compilé en fonction d'un environnement de variables «profil». Mon application sera installée sur différents emplacements, avec un thème différent, mais tous les css sont les mêmes. J'ai juste besoin de changer ce que color palette sera utilisé, lors de la compilation. Mon application a déjà sur la environments.ts une variable profile, qui sera utilisée pour brand image.

Je pensais à quelque chose comme:

export const environment = { 
    production: true, 
    profile: 'appX' 
    apiUrl: 'http://mydoainX.com/api/', 
}; 

et, scss:

$profile: environment.profile; 

Il est possible de faire quelque chose comme ça?

Des pensées?

Answer 1

Finalement, un a trouvé ce question, qui m'a conduit à la solution.

Il est dit de créer plusieurs applications avec différents fichiers .scss en .angular-cli.json.

Étape 1: Créer plusieurs dossiers avec le fichier .scss pour chaque environnement, tous les fichiers .scss a le même nom:

|- src 
    ... 
    |- environments 
    |- app1 
     |- scss 
     |- globalVars.scss 
     |- environment.dev.ts 
     |- environment.prod.ts 
    |- app2 
     |- scss 
     |- globalVars.scss 
     |- environment.dev.ts 
     |- environment.prod.ts 
    ... 

dans src/environnement/app1/SCSS/globalVars.scss: $ profile: 'app1'.

dans src/environments/app2/scss/globalVars.scss: $ profile: 'app2'.

Étape 2:

Ajouter plusieurs applications dans .angular-cli.json(Angular-cli Wiki Here ) et ajoutez l'entrée stylePreprocessorOptions dans chaque objet application pour chaque environnement (Angular-cli Wiki Here).

"apps": [ 
    { 
    ... 
    "name": "app1", 
    "environments": { 
     "dev": "environments/app1/environment.dev.ts", 
     "prod": "environments/app1/environment.prod.ts" 
    }, 
    "stylePreprocessorOptions": { 
     "includePaths": [ 
     "environments/app1/scss" 
     ] 
    } 
    ... 
    }, 
    { 
    ... 
    "name": "app2", 
    "environments": { 
     "dev": "environments/app2/environment.dev.ts", 
     "prod": "environments/app2/environment.prod.ts" 
    }, 
    "stylePreprocessorOptions": { 
     "includePaths": [ 
     "environments/app2/scss" 
     ] 
    } 
    ... 
    }, 
    ... 
], 

Étape 3:

Importer le globalVars.scss où les variables spécifiques env nécessaires. N'utilisez pas le chemin relatif!

@import "globalVars"; 

Lorsque vous utilisez ng build --app=app1, le $profile sera 'app1' et ainsi de suite.

Étape 4: Sur mon theme.scss i utilisé la variable comme ceci:

.my-style { 
    @if $profile == 'app1' {@include angular-material-theme($theme-app1);} 
    @if $profile == 'app2' {@include angular-material-theme($theme-app2);} 

    &.contrast { 
    @include angular-material-theme($theme-contrast); 
    } 
}