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

Question

我正在尝试找到一种方法来更改我的scss 基于“配置文件”变量环境的编译方式。 我的应用程序将安装在不同的位置，不同主题的女巫，但所有的css 都是一样的。我只需要在编译期间更改 color palette 将使用的内容。 我的应用程序已经在environments.ts 上有一个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/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);
  }
}