css - 合并导入的 css 文件

Question

我有一个导入三个其他 css 文件的样式表文件:

<link rel="stylesheet" type="text/css" href="style.css" media="screen" />

style.css 包含:

@import url("../ins/style.css");
@import url("commerce/css/style.css");
@import url("../in/custom.css");

我想改善加载时间并减少请求数，所以我想将三个 css 文件按照导入顺序合并为一个。但问题出现了，所有的布局都搞砸了。我真的很想知道为什么会这样，因为导入 css 文件与包含它们是一样的。有任何想法吗？感谢您花时间阅读。

Answer 1

如果 commerce/css/style.css 是保存布局的 CSS 文件，则该路径可能不适用于所有页面。我会确保所有路径都是相对于根目录的，以确保它们在整个站点上都是正确的。这包括组合 css 文件的原始 href url。

我也不太确定将三个导入放在一个 css 中是否比在 html 中链接它们加载时间更短。如果您想减少加载时间，您需要以某种方式减少加载次数，例如仅在浏览器为 Internet Explorer 时加载 Internet Explorer CSS 等。

让我知道更多的进展。