web-dev-qa-db-ja.com

Angularコンポーネントのグローバルscss変数は、毎回インポートすることなく

SCSS変数はすでにsrc/styles/settings/_variables.scssで定義されており、src/styles.scssにインポートしていますが、これらの変数はすべてのコンポーネントで使用できるわけではありません。

残りのコンポーネントのすべてのSCSS変数を保持するグローバルファイルを作成する方法はありますか？すべての単一コンポーネント@importファイルに.scssを書き込むのは、特にネストされたコンポーネントが多い場合、非常にイライラします。

よく似た質問はたくさんありますが、すべて古くなっており、Angularの最近のバージョンとは関係がないようです。

Angular 7.3をCLIで使用しています。

cssangularsassglobal-variablesangular7
19
Vladimir Humeniuk

あと少し設定を追加するだけでよいので、グローバル変数を宣言する場合は、:root{}でラップする必要があります。つまり、src/styles/settings/_variables.scssです。

:root 
{
--blue: #00b; // or any global you wish to share with components 
}

次に、SCSSでそれらを使用する場合は、そのようにアクセスする必要があります。

.example-class {
  background-color: var(--blue)
}

コメントに関してこれに追加するために、このメソッドはmixins、@mediaおよびkeyframesを使用でき、色/フォントだけに限定されません。それは一例でした。

私の理解では、グローバルファイルsrc/assets/style/globalが必要であり、各scssファイルをそこに定義する場所にインポートする必要があります。

@import 'filename';

コンポーネント内でグローバル変数を使用したくない場合は、グローバルが機能しているときに確認してください。 ViewEncapsulation を調べてください。これは、無視するために使用できるためです。

これは私が現在取り組んでいるプロジェクトがグローバル変数を処理する方法であり、うまく機能しているようです。これにより、使用しているすべてのscssファイルに変数をインポートする必要がなくなります。問題がある場合はコメントしてください、BR。

9
Dince12

すべてのコンポーネントでscss変数を使用してグローバルファイルを使用できるようにする方法はありますか？

各コンポーネントで毎回グローバルファイルをインポートせずに、これらのsass変数を使用できるようにする必要があります。これは不可能です。

[〜＃〜] sass [〜＃〜]での動作方法、パーシャルを使用してコードを整理する場合、@importディレクティブを適用して参照できます。したがって、shared/_variables.scssにsass変数がある場合：

$lightslategray: #778899;
$darkgray: #A9A9A9;

これらの変数は別のスタイルシートで使用する必要があります。これらの変数を含むスタイルシートを最初に@importする必要があります。

// Shared
@import "shared/variables";

.content {
  background: $lightslategray;
}

Angularで同様に機能します（外部スタイルシートの参照に関連します）。したがって、特定のsass variables, mixins or functionsで使用するcomponent.scssが必要な場合、他にはありません。クリーンな方法ですが、component.scssディレクティブを使用して@importでそれらを参照します。タスクを簡単にするために、src/_variables.scssファイルを作成し、component.scssで次のような構文を使用できます。

@import “~variables.scss”;
4
Vadi

angular 8で私のために働きます。

_variable.scssファイルに追加する必要があります：

:root{--my-var:#fabada}

その後angular.jsonに入力し、これを"styles"：に追加します

{"input":"yourPath/_variables.scss"}
0
lauren