可以将角度环境变量插入scss中吗？

Question

我试图找到一种方法来改变我的scss基于“配置文件”变量环境编译的方式。 我的应用程序将安装在不同的位置，女巫的主题不同，但所有的css都是一样的。我只需要在编译期间改变color palette的使用。 我的应用程序已经有environments.ts a profile变量，这将用于brand image。

我想在这样的：

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

，并在scss：

$profile: environment.profile; 

这是可以做到这样的事情？

有什么想法？

Answer 1

最终发现这个question，女巫带我到解决方案。

它说要在.angular-cli.json中创建多个不同.scss文件的应用程序。

步骤1： 与.scss文件为每个环境中创建多个文件夹，所有的.scss文件具有相同的文件名：

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

在SRC /环境

/APP1/SCSS/globalVars.scss： $ profile：'app1'。

in src/environments/app2/scss/globalVars.scss： $ profile：'app2'。

步骤2：

添加多个应用在.angular-cli.json(Angular-cli Wiki Here )，并添加在每个应用程序对象stylePreprocessorOptions条目 每个环境(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" 
     ] 
    } 
    ... 
    }, 
    ... 
], 

步骤3：

导入globalVars.scss其中env-特异性变量需要。 请勿使用相对路径！

@import "globalVars"; 

当使用ng build --app=app1，所述$profile将'app1'等。

步骤4： 在我theme.scss我使用的变量是这样的：

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