@import 无法删除无用CSS，因其仅为文件拼接而非模块加载器；真正删减需在Sass编译后由PurgeCSS等工具扫描HTML/JSX中实际使用的类名来实现。
为什么 @import 不能帮你删掉无用 CSS 模块
Sass 的 @import 只是文件拼接，不是模块加载器。它不分析依赖、不判断选择器是否被使用，更不会在编译时剔除“没被调用的 mixin”或“未被引用的 class”。你删掉一个 @import 语句，只意味着那个文件不参与拼接；但只要它被 import 过，里面所有 CSS 规则（哪怕只定义了一次、从未被 HTML 引用）都会原封不动进入输出结果。
- 常见错误现象：
npm run build后 CSS 文件体积远超预期，DevTools 里看到大量灰色未命中样式 - 使用场景：多人协作的 UI 库、老项目渐进式迁移、组件按需引入需求强烈
- 性能影响：每个
@import增加一次文件读取和字符串拼接，但真正拖慢构建的是冗余 CSS 导致的浏览器渲染开销
真正能删无用样式的工具链位置在哪
必须在 Sass 编译之后、最终 CSS 输出之前介入。Sass 本身不提供 tree-shaking，得靠 PostCSS 插件或构建工具层处理。
-
purgecss是目前最可靠的方案，配合content配置扫描 HTML/JSX/Vue 模板中的类名，反向过滤 CSS - Webpack 用户优先考虑
css-minimizer-webpack-plugin+purgecss-webpack-plugin组合，而非自己写正则匹配 - Vite 用户直接启用
build.cssCodeSplit并确保build.rollupOptions.output.manualChunks不把所有 CSS 打包进一个style.css - 注意兼容性：
purgecss默认不识别动态类名（如class="bg-${color}"），需用safeList显式保留
如果非要用 Sass 层做“逻辑隔离”，该怎么做
放弃“自动删除”，转为“显式控制输出”。核心是把样式定义和实际应用拆开，用 @include 替代隐式注入。
- 把通用工具类（
mt-2、flex）全写进_utilities.scss，但不@import它——只在需要的组件 SCSS 里@include margin-top(0.5rem) - 用
@function封装颜色/间距计算，避免重复声明；用@mixin包裹响应式断点逻辑，而不是写一堆@media (min-width: ...) - 禁止在
_variables.scss里直接写.btn { ... }——变量文件只放$btn-padding，样式归组件文件管 - 这样做的好处：Git diff 清晰、PR 审查可定位样式变更源头、后续迁移到 CSS-in-JS 或 Tailwind 更平滑
容易被忽略的“无用”来源：source map 和注释
很多人以为删了 @import 就干净了，其实 /*# sourceMappingURL=... */ 和开发期留下的 // TODO: refactor 注释也会进生产包。
- 检查 Webpack 的
css-loader配置，确认sourceMap: false在 production 模式下生效 - Sass 编译命令加上
--style compressed --quiet，避免@debug或//注释泄漏 - CI 流程中加一行
grep -r "sourceMappingURL" dist/css/，发现就报错阻断发布
真正难的不是找到哪行 Sass 代码没被用，而是确认整个构建流程里没有环节偷偷把死代码又塞回去。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
