应手动引入单组件样式文件或使用 vite-plugin-style-import 插件自动注入，避免全量加载 dist/index.css；需精确配置路径、启用 ensureStyleFile，并确保主题变量在组件样式前加载。
为什么 import 'xxx/dist/index.css' 会导致全量加载
组件库（比如 Element Plus、Ant Design Vue）的 dist/index.css 是构建后打包好的完整样式文件，里面包含所有组件的 CSS 规则。只要引入它，Webpack/Vite 就会把整个文件打进最终的 style.css 或内联到 JS 中，哪怕你只用了 Button。
常见错误现象：npm run build 后发现 CSS 文件体积暴涨，Source Map 显示大量未使用的 .el-dialog__header、.ant-table-cell 等规则。
- 这是构建时的静态导入，和 JS 的 tree-shaking 无关 —— CSS 没有“导出/导入”语义，工具无法判断哪些类名实际被用到
- 即使你用的是 ESM 引入方式（如
import { Button } from 'ant-design-vue'），样式仍需手动控制 - Vite 的
css.codeSplit默认只按入口拆分，不按组件粒度拆
怎么让 Button 只加载 button.css
核心思路：绕过组件库默认的全量 CSS 入口，改用其提供的「单组件样式文件」路径，或借助插件自动解析导入关系。
以 Element Plus 为例，它的源码中每个组件都有对应样式文件：node_modules/element-plus/lib/components/button/style/css.js（对应 button.css）。
- 手动按需引入：在使用
Button的组件里，加一行import 'element-plus/lib/components/button/style/css.js' - 注意路径必须严格匹配组件库文档给出的样式模块路径，比如 Ant Design Vue 是
ant-design-vue/es/button/style/css - 如果用 TypeScript，需确保
types配置能识别这些路径，否则可能报Cannot find module - 别写成
import './button.css'—— 这种相对路径不会触发别名解析，也绕不开打包器的常规处理逻辑
Vite 插件 vite-plugin-style-import 怎么配才不翻车
这个插件能在编译期自动把 import { Button } from 'element-plus' 转成同时引入 Button 组件代码 + 对应样式文件，省去手动 import 样式。
但默认配置几乎必踩坑：
- 必须显式指定
libs配置，不能只靠插件猜 —— 比如 Element Plus 要写libraryName: 'element-plus'，且esModule: true得设对 - 路径映射要精确到文件后缀：
resolveStyle: (name) => `element-plus/lib/components/${name.toLowerCase()}/style/css.js` - 如果组件库用了 CSS-in-JS（如某些 React 库），这个插件不适用 —— 它只处理 CSS/SCSS 文件的自动注入
- 开启
ensureStyleFile: true后，插件会检查样式文件是否存在，避免静默失败，建议始终打开
SCSS 主题变量怎么和按需加载共存
按需加载样式后，@use 'element-plus/theme-chalk/src/common/var.scss' 这类全局变量引入依然有效，但要注意作用域和顺序。
典型问题：自定义主题色没生效，或者覆盖了组件内部 $primary-color 却没反应。
- 必须在所有组件样式 import 之前引入并设置变量，否则组件样式已编译完成，变量值已固化
- Element Plus 的
css.js文件本质是先@use变量再@import组件样式，所以你的变量设置必须出现在它前面 - 不要在
main.ts里import './styles/variables.scss'—— 这个顺序不可控；推荐统一在入口 CSS 文件（如index.scss）顶部做变量覆盖 - 如果用 Vite 的
css.preprocessorOptions.sass.additionalData注入变量，注意它对所有 SCSS 文件生效，可能污染第三方样式
按需加载不是开关一开就完事，样式路径、变量注入时机、插件配置粒度，三者稍有错位，就会出现“看着引入了，但样式没变”这种最磨人的状况。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
