web-dev-qa-db-ja.com

Angular 7にsass変数値を設定します

私は過去数週間angularを使用していて、現在、パブリックサイトのスタイルを動的に設定する必要があります。サイト管理者は、さまざまなカラーコードと、データベース。これらは、パブリックサイトを開いたときに反映されます。

私はasp.netの出身なので、以前はマスターページの読み込みで、DBから値を取得して.lessファイルに書き込み、Javaスクリプトライブラリに処理を任せていました。そこは簡単です。

しかし、現在の状況では、sassを使用しています。変数を.scssファイルに書き込む方法が見つかりません。

here から新しいものAPP_INITIALIZERを学ぶだけですが、最終的にこの投稿は.scssファイルへの書き込み方法を示していません。

私は実際に自分のasp.netの知識でこれを考えていますが、間違っている可能性があります。または、別の実装方法があります。

私はasp.netで行う簡単なソリューションを求めています。これを同じ方法で実現したいと考えています。

  1. アプリケーションが初めてロードするときに、APIを介してDBから変数値を取得します。

  2. SASS変数ファイルに値を書き込みます。

  3. その後、SASSがこれを処理し、期待どおりの結果が得られます。

まず、提案または例を挙げてください。

ありがとう。

javascriptangularsassangular6angular7
10
kuntal

まず第一に、ASP .NETでは、dbにスタイルや他のフロントエンド関連アセットを保持させることは悪くないかもしれません。これはサーバー側レンダリングフレームワークであるためです。一方、Angularでは、それはクライアント側です（Angular Universalを除きますが、それでも同じように作業することを期待する必要があります）。翻訳（i18nまたはカスタム）、Angularの世界では、バックエンド（dbなど）ではなくフロントエンドに保存されている可能性が高いです。そのため、「テーマ」にアクセスする必要があります。は、特定の方法で保存され、Angularを使用して動的に切り替えることができます。もちろん、スタイル/テーマのキー/変数を保存できますが、実際のCSS値（クラスなど）は、フロントエンド。

アプリのテーマ（Angular）を動的に設定するときに使用する CSS vars から、この簡単な例を見てください。これは1つの方法に過ぎず、これを行う方法はたくさんあり、個人的な好みを探す必要があるかもしれません。

5
Cold Cerberus

他の回答で説明されているように、SASSはビルド時にプレーンCSSに変換されるため、SASS変数を設定してクライアント上で処理することはできません。

私はあなたが望むものを達成するために2つの選択肢を見ます。

通常、アプリのベースCSSがいくつかあり、管理設定に基づいて追加のCSSをロードする必要があります。 cssの観点から考慮する必要があるのは、追加のcssのすべてのcssの特異性がベースのcssよりも大きいことです。それ以外の場合、ベースはオーバーライドされません。基本的なcssの知識が必要なので、詳細には触れません。

方法1

サーバーリクエストで追加のCSSを生成します。アプリがサーバーURLから起動されたときにロードします。管理者が設定を変更した場合は、jsで再読み込みしてください。

  1. データベースからcssを生成するアドレス/additional.css（または/api/theme/custom-cssに類似している可能性があります）にバックエンドエンドポイントを定義します。たとえば、dbにbackground=redがある場合、エンドポイントは次を返す必要があります
body {background-color: red;}
  1. <link id="additionalCss" rel="stylesheet" type="text/css" href="additional.css" />/<head>にindex.htmlを追加します。そして、それはそれを機能させるのに十分でしょう。
  2. リロードするにはさまざまな方法を使用できますが、これはうまくいくと思います
document.getElementById('additionalCss').href = document.getElementById('additionalCss').href;

これはサーバーに新しいリクエストを出し、サーバーはDB-> cssを実行し、更新されたcssを返します。これはブラウザーに適用されます。

また、クールになりたい（または大きくて複雑なテーマをサポートする必要がある）場合は、scssを使用できます。バックエンドはデータベースからscss変数定義を生成し、サーバーサイドアプリを使用してscss-> cssをコンパイルし、コンパイルされたcssをクライアントに提供する必要があります。しかし、追加のcssが十分に単純である場合、これはやりすぎです。

Additional.cssの背後にあるコンテンツは動的であるため、このメソッドの1つの重要な考慮事項はブラウザーのキャッシュですが、ブラウザーはそれをキャッシュし、バックエンドを呼び出して古いバージョンを提供しない場合があります。

方法2

バックエンドを使いたくない、または台無しにできない場合。 jsonのAPIエンドポイントによってDBから設定を読み込み、クライアントでcssコードを生成して適用します。

  1. HttpClientを使用して設定JSONを取得し、CSSを文字列として生成します。たとえばサーバーが返す
{
  "background": "red"
}

次に、これを文字列に変換します

cssCode = 'body {background-color: red}';
  1. 使用する
let additionalCssStyle = document.getElementById('additionalCss');
if (! additionalCssStyle) {
  additionalCssStyle = document.createElement("style");
  additionalCssStyle.id = 'additionalCss';
  document.head.appendChild(additionalCssStyle);
}
additionalCssStyle.innerText = cssCode;
  1. リロードするには-変更をバックエンドに保存してから、1と2を繰り返します。
5
Ventzy Kunev

@ Cold Cerberus は優れたアプローチを提案しており、フロントエンドでスタイルに関連するものを維持することは正しいですが、これについていくつかの方法を提案しています。

いろいろな色の組み合わせが欲しいとおっしゃいましたが、SASSの条件付きCSSを使用できます。

body[theme="theme1"] {
   // theme 1 css
}

body[them="theme2"] {
    // theme 2 css
}

sassテーママップ を条件付きcssと共に使用できます。

属性を更新するだけで、テーマが自動的に適用されます。

    themeChange() {
    const dom = document.querySelector('body');
    dom.theme = theme1;    // change theme here
    }

バックエンドから更新する必要がある要素スタイル（カラーコードなど）に非常にこだわっている場合は、テーマアプローチと共にng-styleを使用できます。

<some-element [ngStyle]="{'font-style': styleExp}">...</some-element>

要件を満たすには、上記のスマートな組み合わせを使用する必要があります。

3
Rajat Gupta

私はあなたが望むことができるとは思いません... Angularはアプリケーションのビルド中にSASSファイルを処理し、すべての一般的な結果をプレーンな古いcssに書き込みますファイルコンポーネント固有のものはJavaScriptとして生成され、実行時にスタイルが適用されます。

したがって、設定する必要があるすべてのSASS変数は、コンパイル時に存在する必要があります。

ただし、Angularコンポーネント）で設定を事前定義し、次のように（DBまたは他の場所からの）入力に基づいて設定を切り替えることができます。

// your.component.ts
@Component({
  // ... component stuff
  styles: ['h1.option1 {color: red;}', 'h1.option2 {color: blue;}'],
  template: `
    <h1 *ngIf="optionSelection$ | async as option; else noOption"
        [class.option1]="option == 1" 
        [class.option2]="option == 2">
       Hey there, I'm styled!
    </h1>
    <ng-template #noOption>
      <h1>No option received</h1>
    </ng-template>
  `
})
export class YourComponent {
  optionSelection$: Observable<number>;
  constructor(yourService: YourService){
    this.optionSelection$ = yourService.getYourOption().pipe(startWith(null));
  }
}

これが少し役立つことを願っています:-)

2
Heehaaw

その方法では不可能ですが、sass変数を使用するのではなく、sass変数の値を使用します。任意の値を指定できます。

どうして？ sassはパッケージング時にコンパイルされ、最終的にはプレーンCSSを生成します。

このオプションのスタイルプロセッサを利用するフレームワークの例は、角張ったものです。

あなたの場合、angular内で動的テーマを検討することをお勧めします。必要なものにはJavaScriptが絶対に必要です。寄稿者の1人が提供するメディアのガイドをご覧ください。

https://stackoverflow.com/a/54559350/3070499

0
Joseph118

Sassはコンパイル済みのCSSなので。別のtheme.cssを生成せずにテーマを動的に変更することはできません。これがJSSの出番です。 JSSは、JavaScriptベースのスタイル挿入メカニズムです。CSSは、使用しているファイルに直接挿入されます。

react-angular-material はこれを広範囲に使用し、アプリケーションの change theme に色変数を動的に渡すことができます。

たとえば、この男は angular で作成しています。

ドキュメント： jss-angular 、 jss

リンク： jss-with-angular

0
Mukundhan