Angular CLI 可以将特定于环境的设置传递给 Sass 变量吗? [英] Can Angular CLI pass environment-specific settings to Sass variables?

问题描述

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

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

• 如果没有 Angular CLI，我想我可以使用 Sass 自定义函数在命令行上，但我不知道如何将这种方法与 Angular CLI 一起使用.

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

• Webpack 的 sass-loader 声明如下，但我不知道我是否可以在 Angular CLI 中使用它:

  <块引用>

  环境变量

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

  <代码>{loader: "sass-loader",选项: {数据:"$env:" + process.env.NODE_ENV + ";"}}

有什么想法吗?

解决方案

除了 Arjan 的评论，我通过在 .angular 中创建多个具有不同 .scss 文件的应用程序解决了这个问题-cli.json

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

|- src...|- 环境|- 环境-scss|- globalVars.scss|- 环境-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).

应用程序":[{"root": "src",..."name": "开发",样式预处理器选项":{包含路径":[环境/环境-scss"]}...},{"root": "src",..."name": "prod",样式预处理器选项":{包含路径":[环境/环境-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'

When building an Angular 2 app using Angular CLI/webpack, I'd like to specify values for a few Sass variables. Like make some url(#{$my-base-path}/...) or $fa-font-path point to a CDN in production, or simply set different background colors for acceptance and production builds.

I like how Angular CLI picks a config from, e.g., environments/environment.prod.ts. But I'd also happily use additional command line parameters for ng build, but no luck so far:

• Without Angular CLI, I guess I could use Sass custom functions on the command line, but I don't know how I could use that approach along with Angular CLI.

• Maybe I can specify the path to some specific my-variables.sccs to use for all Sass compilations?

• Webpack's sass-loader states the following, but I've no clue if I can use that with 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 + ";"
      }
  }
  

Any idea?

解决方案

In addition to the comment by Arjan I solved the problem by creating multiple apps with different .scss file in .angular-cli.json

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

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

in src/environment-scss/globalVars.scss:

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

in src/environment-prod-scss/globalVars.scss:

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

Step 2: 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": [
  {
    "root": "src",
    ...
    "name": "dev",
    "stylePreprocessorOptions": {
      "includePaths": [
        "environments/environment-scss"
      ]
    }
    ...
  },
  {
    "root": "src",
    ...
    "name": "prod",
    "stylePreprocessorOptions": {
      "includePaths": [
        "environments/environment-prod-scss"
      ]
    }
    ...
  }  
],

Step 3: Import the globalVars.scss where the env-specific variables needed. Do not use the relative path

@import "globalVars";

When using ng build --app=dev, the $my-base-path will be 'YOUR/DEV/PATH', when using ng build --app=prod, the $my-base-path will be 'YOUR/PROD/PATH'

这篇关于Angular CLI 可以将特定于环境的设置传递给 Sass 变量吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！