Question

好吧，只是为了立即说出问题，我有一种情况，即样式表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检查器中的“已计算”标签确认了这种情况。

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

Answer 1

CSS按您指定的顺序导入。如果您希望自定义样式具有最高优先级，请将import './Header.scss';置于所有其他导入之下。

Answer 2

现在感觉非常愚蠢。我在发帖后几分钟回答了我自己的问题。上面的@David L. Walsh是正确的。

问题在于'index.js'我在CSS文件之前导入了React组件文件（包括上面提到的'style.scss'）。

全局样式覆盖反应组件样式

2 个答案: