直接用lessc编译的CSS不适合首屏内联，因默认全量打包@import内容导致体积膨胀、CSSOM延迟；应通过@import(reference)隔离变量混入，仅显式调用首屏规则，并用Webpack/Vite专用入口和Coverage验证确保高使用率。
为什么直接用 lessc 编译出的 CSS 不适合首屏内联
因为默认编译会把所有 @import 的样式（包括非首屏组件、:hover、动画、@keyframes）全量打包进一个文件，导致内联后体积膨胀、CSSOM 构建延迟。浏览器解析大块 <style> 仍要花时间，起不到“急用包”效果。
用 @import (reference) 隔离变量与混入，只让真正需要的规则输出
这是 Less 控制样式输出时机的核心机制：只有显式调用的 .mixin 或直接写的规则才会生成 CSS；@import (reference) 只导入变量和混入定义，不产生任何选择器。
- 在
_variables.less和_mixins.less开头加@import (reference)声明 - 首屏入口（如
critical.less）只@import (reference)公共文件，再手动写或调用首屏组件规则（如@import './components/header.less';） - 避免在
_variables.less里写@font-face或@keyframes——它们会被每个引用该文件的入口重复输出
Webpack 中用 mini-css-extract-plugin 单独处理 critical 入口
不能靠正则或人工复制筛首屏样式，必须让构建流程“知道”哪些 Less 是专为关键路径服务的。
- 新建
styles/critical.less，只@import (reference)变量/混入，再显式引入首屏组件样式 - Webpack 配置中新增 entry：
critical: './styles/critical.less' - 搭配
mini-css-extract-plugin提取为独立critical.css，供内联或 preload - 若用
.extend()，提取工具（如 Penthouse）会漏掉被扩展的选择器——改用.mixin()显式调用更可控
内联后必须用 Coverage 工具验证真实使用率
光看 HTML 里有没有 <style data-critters> 没用。关键要看浏览器行为是否真的不卡顿。
立即学习“前端免费学习笔记（深入）”；
- Chrome DevTools → Rendering → “Coverage” 面板，刷新首屏，查看 CSS 使用率是否 ≥95%
- Vite 用户推荐
vite-plugin-critical-css，它在 SSR 渲染首屏 HTML 后，真实提取 DOM 中用到的选择器，比静态分析准 - 若覆盖率低于 90%，说明有首屏渲染依赖但未被提取的规则，或存在动态插入类名（如
clsx、twMerge）导致静态分析失效
body { margin: 0 }），就会破坏 @import (reference) 的隔离性，导致非首屏样式悄悄渗入 critical.css。务必把纯定义和规则实现彻底分开。 
