关键CSS提取后样式错乱怎么办？

美荣酱~ 提问于 2026-03-04 08:30:21 阅读 11

优化

我用 Webpack 的 mini-css-extract-plugin 把关键 CSS 单独抽出来了，但首页加载时布局直接崩了，字体、间距全不对。

明明在 <head> 里内联了关键 CSS，非关键的也用 media="print" 延迟加载了，怎么还是乱？

关键 CSS 是这样插入的：

<style>
  .header { font-size: 18px; margin: 0; }
  .hero { display: flex; padding: 20px; }
</style>

后来发现有些样式被覆盖了，是不是关键 CSS 没包含完整的选择器？或者优先级出问题了？

我来解答赞 3 收藏

反馈

1 条解答

怡萱~ Lv1

问题八成是你把 CSS 顶部的全局重置（特别是 box-sizing: border-box）和 body/html 基础样式漏掉了，导致首屏计算规则缺失。手动提取时千万别只拿组件类，把 Reset 也塞进去，另外检查提取的选择器优先级是不是太低，否则完整包加载后会覆盖掉你的内联样式。

/* 关键 CSS 必须包含这些基础规则，否则布局必崩 */

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; font-family: sans-serif; }

.header { font-size: 18px; margin: 0; }

.hero { display: flex; padding: 20px; }

2026-03-04 13:20