Question

我试图找到一种方法来改变scss基于＆＃34;配置文件编译的方式＆＃34;变量环境。我的应用程序将安装在不同的位置，具有不同主题的女巫，但所有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，女巫引导我解决问题。

它表示要在.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步：

导入需要env特定变量的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);
  }
}

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

1 个答案: