2016-10-04 35 views
1

私は、この問題に対する解決策を見つけようとしている:ロード異なるCSS

私はページ、元に基づいて含み、異なるCSSを使用したテンプレートを使用しています:場合は、私は

Login uses login.css 
Home uses home.css 

両方ともロードすると、ログインページが壊れてしまいます。スタイルはhome.cssによって上書きされるため ルートまたはコンポーネントがログインの場合はlogin.cssをロードし、ホームの場合はもう一方をロードまたは必要とします。

私はWebPACKの両方のファイルを持つグローバルCSSを構築し、すべてが壊れている...

の両方をロードする場合、私はcomponentDidMountでCSSを要求しようとしたが、私はそれが道ではないと思います:)

ありがとうございました

答えて

0

これらのスタイルは両方ともページ固有のものだと思います。

テンプレート内には、.login/.homeクラスがあり、これをcss内の名前空間として使用します。あなたがお尻を使用している場合、これはクラス内のすべてのお尻を包むほど簡単です。それ以外の場合は、すべての要素/クラスの先頭にクラスを追加して追加できます。

+0

はい私はそれを行うことができますが、それらはテンプレートからのファイルなので、すべてのテンプレートのアップデートでそれらを変更する必要があります。スマートなソリューションがあるかどうかを知りたいです。 – avalla

0

これは、SASSやreactjsなどの技術に依存せずに、CSSファイルを結合するより一般的なアプローチです。

2つのCSSファイルを結合すると、Gruntまたは類似のツールを使用して、そのタスクを自動化すると仮定します。したがって、外部ソースからのもので、手動で変更することなく更新されたバージョンを使用したい場合でも、CSSファイルを自動的に更新するのはOKです。

また、クラスを使用してページのスタイルを設定しているため、CSSにタグベースのスタイルはありません。制動せずにCSSファイル内のタグの名前を変更することも、コードを大きく変更することもできないためです。

私の前提が真実なら、grunt-css-prefixのようなものを使うことができます。このスニペットのように、ログインページのプレフィックスをCSSクラスに追加することができます。

オリジナルCSSファイルの内容:兵卒のスクリプトを実行した後

.foo, 
.bar, 
h1 { 
    display: none; 
} 

CSSファイルの内容:

.login-foo, 
.login-bar, 
h1 { 
    display: none; 
} 

はちょうどあなたのログイン-HTMLでのクラス名のようなlogin-fooを使用して、あなたが行ってもいいです。

grunt-css-prefixの使用方法の詳細については、https://www.npmjs.com/package/grunt-css-prefixをご覧ください。

0

まず、ビューに異なるCSSクラスを使用し、それらのクラスに基づいて要素をスタイルするだけで問題はありません。

あなたがあなたのスタイルフォルダ(またはあなたのスタイルを保持するために使用しているフォルダ)にコンポーネントlogin.jsxを持っていれば、部分_login。scssとその特定のコンポーネントのCSSセレクタとスタイルを追加して、レスポンスアプリケーションのすべてのコンポーネントに対して行います。

次に、これらの部分データをmain.scssファイルに追加します。これは、反応アプリに読み込むファイルです。

ここでは、一部のsass部分を含むmain.scssファイルの例を示します。反応のスタイルで作業するための良い、きれいな方法だ

@import 'base/variables'; 
@import 'base/defaults'; 
@import 'components/login'; 
@import 'components/home'; 

、もちろん、あなたのアプリケーションで動作するようにSASSを得るためにあなたのWebPACKを設定する必要があります。

詳しくはthisthisをご覧ください。

+0

私のプロジェクトはすでにこのように構成されていますしかし、私は外部のテンプレートを使用していますが、反応のために構築されていないので、私はいくつかの問題にぶち当たっています。 – avalla

+0

ああ、あなたが使っているテンプレートをより具体的にすることができますか? – bntzio

関連する問題