React component styling being overridden by global styling

Question

Okay, just to state the problem right away, I have a situation where stylesheet B which is being loaded (or so I thought) AFTER stylesheet A, and should therefore be overriding A's styling because of cascading, is in fact being loaded into the browser BEFORE A. The order is wrong.

I have a simple React component structure as follows:

App
  > Header
  > Home
  > Footer

In my 'index.js' I have the basic order of statements:

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")
);

Here's the structure in App.js:

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

And at the top of Header.js I have the following:

import './Header.scss';

The Webpack loader that's processing .scss files is:

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

I've confirmed that there is no !important being used anywhere, and the styling itself is exactly the same.

What's happening is that "Header.scss" is being loaded FIRST, and 'style.scss' SECOND. In other words 'style.scss' is overriding the styles in 'Header.scss', versus the other way around as they appear in the code. The 'Computed' tab in Chrome inspector confirms this is the case.

Anybody have any idea what's going on here?

Answer 1

The CSS is imported in the order you specify. If you'd like your custom styling to have the highest precedence, put import './Header.scss'; beneath all the other imports.