Angular2コンポーネントでscss変数を操作する方法

Question

Angular2コンポーネントで宣言されたscss変数を変更する方法はありますか？私は、ユーザーの選択に基づいてテーマを動的に追加したいので、scss変数を変更する必要があります。私は別のscssファイルにすべてのscss変数を保持し、他のscssファイルに同じものをインポートすることについて読んだ。しかし、私はコンポーネントファイルに同じものをインポートし、変数を変更することができます。これは実現可能ですか？ TIA

現在、mixinを使用しています。コードはここにあります：

// Color themes 
$themes: (
    default: #ff0000, 
    banana: #f1c40f, 
    cherry: #c0392b, 
    blueberry: #8e44ad, 
    leaf: #27ae60, 
    nightsky: #2980b9 
); 


// Helper theme mixin 
@mixin theme($name, $color) { 
    .#{$name}{ 
     background-color: lighten($color, 30%); 
    } 
    .#{$name} { 
    h1{ 
     color: $color; 
    } 
    } 
    .#{$name} { 
    nav{ 
     a{ 
     color: $color; 
     } 
    } 
    } 
} 

しかし、$ themesマップ内の変数をAngularコンポーネントから変更する方法はありますか？

Answer 1

これはです。は本質的にSassです。ビルドタイムツール、プリプロセッサです。 AngularはCSSについてのみ知っています（ただし、ComponentメタデータのstylesとstyleUrlsのプロパティ）。

これは、あなたのスタイルにAngularが手を差し伸べるまでに、SassはすでにCSSにコンパイルされていることを意味します。 は、ランタイムでSass変数を変更することはできません。その理由は、その時点でが存在しないからです。が存在しないためです。

---

代わりにcustom propertiesを使用して、通常のJavaScriptで変更することができます。