リアクションコンポーネントのスタイリングがグローバルスタイリングでオーバーライドされています

Question

これで問題はすぐに言えることですが、スタイルシートAの後にスタイルシートBがロードされている（または考えていた）状況があるため、Aのスタイルをオーバーライドする必要がありますカスケーディングの、実際にはAの前にブラウザにロードされています。順序が間違っています。

私は次のように単純なコンポーネント構造に反応があります。では

App 
    > Header 
    > Home 
    > Footer 

私の私は文の基本的な順序を持っている「index.js」：ここで

import './assets/theme/theme_specific/scss/style.scss'; 

render(
    <Router history={browserHistory}> 
    <Route path="/" component={App}> 
     <IndexRoute getComponent={lazyLoadComponent(Home)} /> 
     <Route path="/resume" getComponent={lazyLoadComponent(Resume)} /> 
    </Router>, 
    document.getElementById("app") 
); 

はApp.jsで構造です：

class App extends React.Component { 
    render() { 
    return (
     <div> 
     <Header /> 
     {this.props.children} 
     <Footer /> 
     </div> 
    ); 
    } 
} 

そしてHeader.jsの上部に私は次があります。

.scssファイルを処理しています

import './Header.scss'; 

ザ・WebPACKのローダは次のとおりです。

test: /\.scss$/, 
loader: 'style!css?sourceMap!resolve-url!sass?sourceMap', 

私はどこでも使用されて何の!importantがないことを確認しました、そしてスタイリング自体はまったく同じです。

「Header.scss」がFIRSTに読み込まれ、「style.scss」SECONDが読み込まれています。言い換えれば、 'style.scss'は 'Header.scss'のスタイルをオーバーライドしています。 Chromeのインスペクタの[計算された]タブでは、これが正しいことが確認されます。

ここで何が起こっているのか誰も知りませんか？

Answer 1

CSSは指定した順序でインポートされます。カスタムスタイルの優先順位を最も高くする場合は、import './Header.scss';を他のすべてのインポートの下に配置します。

Answer 2

今は非常に愚かな気分です。私は自分の質問に、投稿後わずか数分で答えました。上記の@David L. Walshは正しいです。

問題は 'index.js'で、CSSファイル（上記の 'style.scss'を含む）の前にReactコンポーネントファイルをインポートしていたことです。