SCSS编译后CSS文件过大时该如何分析和优化体积-css教程-PHP中文网

coverage面板可快速定位未使用css：打开后刷新页面，红色标记完全未命中规则；需完整触发所有用户路径（含spa路由切换、伪类交互），否则:hover等会被误标；点击文件可逐行查看，红色行悬停提示“this rule is not used”且styles面板不显示时方可安全删除。

scss编译后css文件过大时该如何分析和优化体积

用Coverage面板快速定位未使用CSS

Chrome DevTools 的 Coverage 面板是最快确认“哪些 CSS 根本没被用过”的方式。打开后刷新页面，它会标出每行 CSS 的使用状态 —— 红色代表完全未命中，灰色是部分匹配。常见现象：main.css 里有大量 .m-1 到 .m-100 工具类、.text-xs～.text-4xl 字体类，但实际页面只用了其中不到 5%。

注意：Coverage 只反映当前页面的加载路径，单页应用需手动跳转所有路由再重新录制；Vue/React 中动态拼接的类名（如 className={`btn-${status}`}）会被标为未使用，需在 purgecss 配置中显式 whitelist 或改用 whitelistPatterns。

禁用@extend，改用@mixin+单类名复用

@extend 是体积膨胀重灾区，尤其和 BEM 混用时。它不共享声明，只拼接选择器，比如 .card__title {@extend %text-emphasis;} 和 .list__item {@extend %text-emphasis;} 会导致相同样式块被复制两份，且无法被 purgecss 或 cssnano 合并。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

把视觉逻辑封装进 @mixin，各组件显式调用，最终输出仍是独立类名，利于压缩和 gzip
禁止在 @each 循环中 @include 含选择器的 mixin（如 @include btn-variant($color)），改用插值生成原子类：.btn-#{key}-#{value} { ... }
若必须用占位符，只限无上下文、无伪类的纯行为类，如 %sr-only、%clearfix，绝不用 %btn-hover 这类含 &:hover 的

确保 purgecss 在 Sass 编译之后、CSS 压缩之前运行

purgecss 不处理 .scss 源码，只对已生成的 .css 文件生效。它扫描 HTML/JS/Vue 模板提取类名，再反向删除未引用的选择器。配置错顺序或路径，等于白装。

Webpack 中顺序必须是：MiniCssExtractPlugin → PurgeCSSPlugin → CssMinimizerPlugin；放错位置会处理内联样式块而非最终 CSS 文件
content 字段要覆盖所有模板路径，Vue 项目写 ['./src/**/*.{vue,js,ts}']，漏掉 .tsx 就可能保留一堆未用的 data-v-xxx 类
开发环境禁用 purgecss，热更新时路径变化快，容易误删正在编辑的样式；只在 mode === 'production' 时启用

显式设置 sassOptions.outputStyle = 'compressed' 并关闭 sourceMap

--style=compressed 不是默认行为，Webpack 的 sass-loader 默认输出 expanded 格式。漏配这项，后续所有压缩插件都得多压一遍空格换行，纯属浪费算力。

在 sass-loader 的 options 中必须显式写：sassOptions: { outputStyle: 'compressed', sourceMap: false }
sourceMap: true 会把 base64 编码的 map 直接追加在 CSS 末尾，单文件可能暴增 100KB+，务必关掉
不要依赖 css-minimizer-webpack-plugin 来补救格式问题 —— 它只能压缩已生成的内容，无法逆转 Sass 层面的嵌套爆炸或 @extend 复制