web-dev-qa-db-ja.com

Angular CLIは環境固有の設定をSass変数に渡すことができますか？

Angular CLI/webpackを使用してAngular 2アプリを構築する場合、いくつかのSass変数の値を指定したいと思います。いくつかのurl(#{$my-base-path}/...)または$fa-font-pathが本番環境のCDNを指すようにするか、受け入れビルドと本番ビルド用に異なる背景色を設定するだけです。

AngularCLIがenvironments/environment.prod.tsなどから構成を選択する方法が好きです。しかし、ng buildに追加のコマンドラインパラメーターも喜んで使用しますが、これまでのところ運がありません。

  • Angular CLIがなければ、 コマンドラインでSassカスタム関数を使用する ができると思いますが、Angularと一緒にそのアプローチを使用する方法がわかりません。 _CLI。

  • たぶん、すべてのSassコンパイルに使用する特定のmy-variables.sccsへのパスを指定できますか？

  • Webpackのsass-loader 次のように述べています ですが、Angular CLIで使用できるかどうかはわかりません：

    環境変数

    実際のエントリファイルの前にSassコードを追加する場合は、dataオプションを設定するだけです。この場合、sass-loaderはdataオプションをオーバーライドせず、エントリのコンテンツを追加するだけです。これは、Sass変数の一部が環境に依存している場合に特に役立ちます。

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

何か案が？

angularsasswebpackangular-cli
11
Arjan

Arjanのコメントに加えて、.scssに異なる.angular-cli.jsonファイルを使用して複数のアプリを作成することで問題を解決しました。

ステップ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'になります。

11
phuud

Angular CLI 6の時点で、environment.tsは本番ビルドで自動的にenvironment.prod.tsに置き換えられなくなりました。代わりに、 新しいオプションfileReplacements in angular.json 。

the futureCLI 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がリリースされるまで、上記- 動作しません ：

現在、ファイル置換機能はTSファイルに対してのみ機能します。具体的には、webpackコンパイラホストの一部であるファイルに対してのみ機能します。

どうやら、バグ修正 CLI 6.1に含まれる予定です 。

6
Arjan

いいえ、そうではありません。

環境の.tsファイルのみ。 SASSはありません。

これがあなたができる他の何かです：

  • TS環境ファイルを使用して構成値を取得します（グローバル変数などに保存しますmain.ts-他のファイルへのロードに問題があったと思います）
  • SASSファイルがグローバルになるように、encapsulation: ViewEncapsulation.Noneを含む2つの空のコンポーネントを用意します
  • *ngIf環境ファイルから保存した値に基づく2つのコンポーネントのそれぞれ

もう1つの方法は、ng ejectを呼び出して、CLIにプロジェクトを、構成を変更できる通常のWebpackプロジェクト（RC0以降）に変換させることです。

3
Meligy