可以将角度环境变量插入到 scss 中吗? [英] It's possible to insert angular environment variable into scss?

问题描述

我正在尝试找到一种方法来根据配置文件"变量环境更改我的 scss 的编译方式.我的应用程序将安装在不同的位置，具有不同的主题，但所有的 css 都是相同的.我只需要在编译期间更改将要使用的 调色板.我的应用程序已经在 environments.ts 上有一个 profile 变量，该变量将用于 brand image.

I'm trying to find a way to change how my scss is compiled based on a "profile" variable environment. My app will be installed on different locations, witch with different theme, but all the css is the same. I just need to change what color palette will be used, during compilation. My app already have on the environments.ts a profile variable, that will be used for brand image.

我在想:

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

并且，在 scss 上:

$profile: environment.profile;

可以做这样的事情吗?

有什么想法吗?

推荐答案

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

Eventually a found this question, witch lead me to the solution.

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

It says to create multiple apps with different .scss file in .angular-cli.json.

第 1 步:为每个环境创建多个带有 .scss 文件的文件夹，所有 .scss 文件都具有相同的文件名:

Step 1: Create several folders with .scss file for each environment, all the .scss files has the same filename:

|- 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'.

in src/environments/app1/scss/globalVars.scss: $profile: 'app1'.

在 src/environments/app2/scss/globalVars.scss 中:$profile: 'app2'.

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

第 2 步:

在 .angular-cli.json 中添加多个应用程序 (Angular-cli Wiki 在这里)，并在每个应用程序对象中添加 stylePreprocessorOptions 条目以用于每个环境(Angular-cli Wiki Here).

Add multiple apps in .angular-cli.json ( Angular-cli Wiki Here ), and add stylePreprocessorOptions entry in each app object for each environment ( 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 the globalVars.scss where the env-specific variables needed. Do not use the relative path!

@import "globalVars";

当使用 ng build --app=app1 时，$profile 将是 'app1' 等等.

When using ng build --app=app1, the $profile will be 'app1'and so on.

第 4 步:在我的 theme.scss 上，我使用了这样的变量:

Step 4: On my theme.scss i used the variable like this:

.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 中吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！