Question

在React应用中，我将index.css导入index.js：

import React from "react";
import ReactDOM from "react-dom";
import Main from "./Main";
import "./index.css";

ReactDOM.render(
  <Main/>, 
  document.getElementById("root")
);

我还有一个辅助CSS文件secondary.css：

.content {
    font-size: 80px;
}

我在index.css中导入的

@import "secondary.css"

.thisClassIsNeverUsed {
}

由于某种原因，这不起作用（.content divs中的文本为正常大小，而不是80px）。奇怪的是，如果我将secondary.css导入移动到index.css的底部，它会起作用：

.thisClassIsNeverUsed {
}

@import "secondary.css"

有人知道为什么会这样吗？考虑到CSS导入如果放置在文件顶部，应该只能起作用，这似乎很奇怪。

编辑：作为另一个数据点，如果我扔掉React东西，只是在浏览器中打开一个原始HTML文件：

<head>
    <link rel="stylesheet" type="text/css" href="index.css">
</head>

<div class="content">Hello</div>

然后，无论secondary.css导入是在index.css的顶部还是底部，都不会应用.content CSS。我不太熟悉CSS导入，所以我不知道这是否行得通。

回应CSS之谜：@import仅在index.css底部

0 个答案: