と状況に応じ.LESSが

Question

私のサイトは

は私が私の基本的なstyles.lessファイルを呼び出すときに私が使用しますので、内部のvariables.lessを調整することを確認してみてくださいあまりローダーをコンパイルするとReact.JS上にある反応と呼ばれますいくつかのテーマ。

人物が記録されていない限り、情報のテーマはありません。

私は基本ファイルをstyles.lessとする必要があります。variables.lessをインポートします。

私は本当に気にしません。

私は明らかに.LESSファイルを作成し、私はこのような情報を持っている時にロードするためにそれを追加することができます。

import 'common/styles/less/brand/orange.less'; 

しかし、それは色の変化を必要とする各項目のすべてのスタイルを書き換えるために私を強制し、背景このように：

@primaryColor  : #FF6600; 
//RESET BLUE COLOR BTN, HOVER, BORDER 
a{ 
    color:@primaryColor; 
    &:hover{ 
    color:darken(@primaryColor,5%); 
    } 
} 

このような解決策がありますか？ reactApp.jsxオン ：styles.lessオン

import styles={default} 'common/styles/less/styles.less'; 

：

if(styles == 'default'){ 
    @import "./variables.less"; 
    elseif (styles == 'oranges'){ 
    @import "./variables-oranges.less"; 
    } 
} 

任意の提案は、すべてのCSSが唯一の変数は歓迎されるであろうで書き直すこと避けるだろう、私はそれを最適化するための方法で完全に乾燥します。

よろしくお願いいたします。

Answer 1

私はあなたがここで少しの誤解を感じるかもしれないと思います。 lessは、ユーザー入力に基づいて異なるCSSファイルを生成することを意図していません。すべての組み合わせを事前に生成し、条件に基づいてCSSファイルを配信することをお勧めします。テーマを含む完全なCSSファイルを生成することも、テーマ用の汎用CSSファイルと追加のCSSファイルを作成することもできます。

一つの可能​​な設定は次のようになります。

• common.less：オレンジ色のテーマの変数定義
• がbluevars.less：変数変数
• orangevars.lessに依存して、あなたの一般的なテーマを青のテーマの定義
• orange.less：これはオレンジ色のバールと共通のテーマへのインポートのみを含んでいます
• blue.less：あなたが持っているだろうコンパイルした後、共通のテーマ

：

• orange.css
• blue.css

非テーマのCSSファイルの場合は、あなたはdefaultvarsを追加することができます。中立的な色などを含んでいます。

---

別のアプローチ：

• base.less：ベーシック（ニュートラル）
• blue.lessテーマ設定：オレンジテーマ：ベース
• orange.lessの上に追加されます青のテーマをベースの上に追加されます

それは生成されます。

を

• base.css
• blue.css
• orange.css

ここに一切の変数、唯一、昔ながらのCSSのカスケードはありません。これについての良い点は、JSが起動しテーマを読み込む前であっても、base.cssを配信できることです。また、拡張されたCSSでテーマの全く異なる側面をカスタマイズすることもできます。あらかじめ定義されたルールの変数を定義するだけではなく、二重のメンテナンスや重複したコードの犠牲を払う必要があります。

このアプローチは、ブートストラップなどのサードパーティライブラリを使用している場合にも適しています。 CSSレベルを拡張することで、変更を失うことなく、後でライブラリを更新することができます。

---

クライアントに配信するものは、クライアントまたはサーバー上で動的に決定できます。