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一样，或者只是为接受和生产构建设置不同的背景颜色.

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.

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

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:

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

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

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

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

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

Webpack's sass-loader states the following, but I've no clue if I can use that with Angular CLI:

环境变量

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

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 + ";"
    }
}

有什么主意吗?

推荐答案

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

In addition to the comment by Arjan I solved the problem by creating 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
    |- environment-scss
      |- globalVars.scss
    |- environment-prod-scss
      |- globalVars.scss
  ...

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

in src/environment-scss/globalVars.scss:

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

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

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

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

第2步: 在.angular-cli.json (在此处Angular-cli Wiki)，然后在每个应用对象中为每个环境(Angular -cli Wiki Here).

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"
      ]
    }
    ...
  }  
],

第3步: 将globalVars.scss导入需要特定于env的变量. 请勿使用相对路径

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

@import "globalVars";

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

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屋！