angular - Angular CLI 能否将特定于环境的设置传递给 Sass 变量？

Question

在使用 Angular CLI/webpack 构建 Angular 2 应用程序时，我想为一些 Sass 变量指定值。比如让一些 url(#{$my-base-path}/...) 或 $fa-font-path 指向生产中的 CDN，或者简单地设置验收和生产构建的不同背景颜色。

我喜欢 Angular CLI 从中选择配置的方式，例如 environments/environment.prod.ts。但我也很乐意为 ng build 使用额外的命令行参数，但到目前为止运气不好:

• 如果没有 Angular CLI，我想我可以 use Sass custom functions on the command line ，但我不知道如何将这种方法与 Angular CLI 一起使用。

• 也许我可以指定某些特定 my-variables.sccs 的路径以用于所有 Sass 编译？

• Webpack 的 sass-loader states the following ，但我不知道是否可以将其与 Angular CLI 一起使用:

  Environment variables

  If you want to prepend Sass code before the actual entry file, you can simply set the data option. In this case, the sass-loader will not override the data option but just append the entry's content. This is especially useful when some of your Sass variables depend on the environment:

  {
      loader: "sass-loader",
      options: {
          data: "$env: " + process.env.NODE_ENV + ";"
      }
  }
  

有什么想法吗？

Answer 1

除了 Arjan 的评论外，我还通过在 .angular-cli.json

中创建具有不同 .scss 文件的多个应用程序解决了这个问题

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

|- src
  ...
  |- environments
    |- environment-scss
      |- globalVars.scss
    |- environment-prod-scss
      |- globalVars.scss
  ...

在 src/environment-scss/globalVars.scss 中:

  $my-base-path: 'YOUR/DEV/PATH'

在 src/environment-prod-scss/globalVars.scss 中:

  $my-base-path: 'YOUR/PROD/PATH'

第 2 步:在 .angular-cli.json 中添加多个应用 ( Angular-cli Wiki Here ) ，并在每个环境的每个应用程序对象中添加 stylePreprocessorOptions 条目 ( Angular-cli Wiki Here ) .

"apps": [
  {
    "root": "src",
    ...
    "name": "dev",
    "stylePreprocessorOptions": {
      "includePaths": [
        "environments/environment-scss"
      ]
    }
    ...
  },
  {
    "root": "src",
    ...
    "name": "prod",
    "stylePreprocessorOptions": {
      "includePaths": [
        "environments/environment-prod-scss"
      ]
    }
    ...
  }  
],

第 3 步:在需要环境特定变量的地方导入 globalVars.scss。 不要使用相对路径

@import "globalVars";

当使用 ng build --app=dev 时，$my-base-path 将是 'YOUR/DEV/PATH' ，当使用 ng build --app=prod 时，$my-base-path 将是 'YOUR/PROD/PATH'