ロード異なるCSS

Question

私は、この問題に対する解決策を見つけようとしている：

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

Login uses login.css 
Home uses home.css 

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

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

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

ありがとうございました

Answer 1

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

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

Answer 2

これは、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をご覧ください。

Answer 3

まず、ビューに異なる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を設定する必要があります。

詳しくはthisとthisをご覧ください。