真按需加载需路径级控制与构建配置协同：必须严格匹配组件样式入口路径（如element-plus/lib/components/button/style/css.js），配vite插件并启用ensurestylefile，主题变量须前置加载。
直接引入 dist/index.css 就是全量加载，不管用没用都打进包里——这不是按需，是“按库”加载。真要减体积，得让每个组件只带它自己那部分样式，BEM 命名本身不解决加载问题，只是配合 scoped 或 CSS Modules 才能起作用。
为什么 import './Button.css' 还是全局生效
Webpack 和 Vite 默认把所有 import 进来的 CSS 当作全局资源处理，哪怕写在 Vue 单文件组件或 React 的 Button.tsx 里。BEM 类名（比如 .btn__icon）再规范，也拦不住构建工具把它抽进 main.css 里，影响整个站点。
- Vue 用户必须写
<style scoped></style>，否则样式就是全局的 - React 用户得配
css-loader?modules或直接用Button.module.css - 用了 Element Plus/Ant Design Vue 却还
import 'xxx/dist/reset.css'？这一步就已放弃局部化
怎么让 Button 只加载 button.css
核心不是 BEM，而是路径级控制 + 构建配置协同。组件库（如 Element Plus）提供单组件样式入口，但路径必须严格匹配：
- Element Plus：
import 'element-plus/lib/components/button/style/css.js'（注意是css.js，不是index.css） - Ant Design Vue：
import 'ant-design-vue/es/button/style/css' - 路径错一个字母、少一个
/es/或多一个.js，打包器就当普通文件处理，可能触发全量 fallback - TypeScript 下需在
tsconfig.json的types或paths中补全声明，否则报Cannot find module
Vite 用户别跳过 vite-plugin-style-import
手动 import 单组件样式太容易漏、难维护。插件能自动解析 import { Button } from 'element-plus' 并注入对应 style/css.js，但配置有硬性要求：
- 必须启用
ensureStyleFile: true，否则遇到没有样式文件的组件会静默失败 -
libs配置里的resolveStyle要返回绝对路径，例如：return path.resolve(__dirname, 'node_modules/element-plus/lib/components/${name}/style/css.js') - 主题变量（如
el-theme-chalk）必须在组件样式之前加载，否则覆盖失效 - 插件不处理动态导入（
defineAsyncComponent或import()），懒加载组件仍需手动补样式
真正卡住体积的，往往不是你写了多少 CSS，而是谁在什么时候、以什么方式把它塞进了最终产物。路径写错、插件没配 ensureStyleFile、主题变量加载顺序颠倒——这些细节一错，前面所有按需努力就白做了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
