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

Question

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

我在想这样的事情：

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

并且，在scss：

$profile: environment.profile;

有可能做这样的事情吗？

有什么想法吗？

Answer 1

最终找到了这个问题，女巫带我找到了解决方案。

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

步骤 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/environments/app1/scss/globalVars.scss: $profile: 'app1'。

在 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需要特定于环境的变量的位置。 不要使用相对路径！

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