小编Nat*_*teQ的帖子

好吧,只是为了立即说明问题,我有一种情况,样式表B正在加载(或者我认为)样式表A之后,因此应该因为级联而覆盖A的样式,实际上是加载到浏览器中在A.之前订单是错误的.

我有一个简单的React组件结构如下:

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的顶部,我有以下内容:

import './Header.scss';

处理.scss文件的Webpack加载器是:

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

我已经确认!important在任何地方都没有使用过,而造型本身也是如此.

发生的事情是"Header.scss"正在加载FIRST,而'style.scss'正在加载.换句话说,'style.scss'覆盖'Header.scss'中的样式,而不是代码中出现的那种方式.Chrome检查器中的"已计算"选项卡确认了这种情况.

有人知道这里发生了什么吗？