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 一起使用：

  环境变量

  如果你想在实际入口文件之前添加 Sass 代码，你可以 只需设置data 选项。在这种情况下，sass-loader 不会 覆盖 data 选项，但只附加条目的内容。这是 当你的一些 Sass 变量依赖于 环境：

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

有什么想法吗？

Answer 1

不，它没有。

仅环境 .ts 文件。没有 SASS。

您还可以执行以下操作：

• 使用 TS 环境文件获取一些配置值（保存到全局变量或 main.ts 中的其他内容 - 我认为在其他文件中加载它曾经存在问题）
• 有两个带有encapsulation: ViewEncapsulation.None 的空组件，以便它们的SASS 文件是全局的
• *ngIf 2 个组件中的每一个都基于您从环境文件中存储的值

另一种方法是调用ng eject 让CLI 将项目转换为普通的webpack 项目，您可以修改其配置（RC0 及以上）。

Answer 2

除了 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 )中添加多个应用程序，并在每个环境( Angular-cli Wiki Here )的每个应用程序对象中添加stylePreprocessorOptions条目。

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

Answer 3

从 Angular CLI 6 开始，environment.ts 不再自动替换为 environment.prod.ts 用于生产构建。相反，它uses a new option fileReplacements in angular.json。

对于未来 CLI 6.1，这可以很好地扩展为对 Sass 文件使用完全相同的机制。只需创建一些environment.scss 和environment.prod.scss，在你的Sass 文件中引用一些@import "../../environments/environment" 中的第一个，然后调整你的angular.json 文件：

"defaultProject": "ponyracer",
...
"projects": {
  "ponyracer": {
    ...,
    "architect": {
      "build": {
        ...,
        "configurations": {
          "production": {
            "fileReplacements": [
              {
                "replace": "src/environments/environment.ts",
                "with": "src/environments/environment.prod.ts"
              },
              {
                // BEWARE: this needs Angular CLI 6.1; see below
                "replace": "src/environments/environment.scss",
                "with": "src/environments/environment.prod.scss"
              }
            ],
            ...

最后，使用build --prod、ng build --configuration=production 或build ponyracer --configuration=production 构建。

简单且一致。

但是注意，在 Angular CLI 6.1 发布之前，以上won't work:

目前，文件替换功能仅适用于 TS 文件。更具体地说 - 它仅适用于属于 webpack 编译器主机的文件。

显然，错误修复了will be included in CLI 6.1。