import ‘./node_modules/xxx/dist/xxx.css‘ 会报路径错误
webpack 或 Vite 默认不支持直接 import node_modules 里的 css 路径，尤其当路径含空格、符号或未配置别名时，import './node_modules/element-plus/dist/index.css' 很可能触发 Module not found 错误。
- 正确做法是用绝对路径 alias：在 vite.config.ts 中加
resolve.alias，或 webpack.config.js 里配resolve.modules指向node_modules - Vite 用户更推荐用
import 'element-plus/dist/index.css'（无./开头），它会被解析器自动从node_modules查找 - 如果组件库提供预构建的 CSS 文件（如
ant-design-vue/dist/reset.css），务必核对文档路径，dist下可能没有index.css，只有reset.css或style.css
全局样式被 scoped 或 CSS-in-JS 覆盖
Vue 单文件组件中启用了 <style scoped></style>，或项目用了 Emotion、styled-components 等运行时 CSS 方案，第三方库的 CSS 规则可能因选择器权重不足或作用域隔离而失效。
- 确认第三方 CSS 是通过入口 JS（如
main.ts）加载的，而非某个组件内部 —— 否则它只在该组件作用域生效 - 若使用 Vue 的
scoped，且需要覆盖第三方组件内部样式，得用:deep(.el-button)或提升为全局<style></style> - Next.js 或 Remix 等服务端渲染框架，CSS 加载时机错乱可能导致水合不一致，建议用
useEffect延迟加载或改用dynamic+ssr: false
按需引入时 CSS 没跟上 JS 组件
用 unplugin-vue-components 或 babel-plugin-import 实现组件按需加载后，JS 部分能正常工作，但样式全丢了 —— 因为插件默认不处理 CSS 引入。
- Element Plus 用户需配合
unplugin-element-plus，它会自动注入对应 CSS；Ant Design Vue 则依赖babel-plugin-import的style: true配置 - 手动按需时，不能只写
import { ElButton } from 'element-plus'，还得补一句import 'element-plus/theme-chalk/el-button.css' - 路径拼写极易出错：
theme-chalk不是theme，el-button.css不是button.css，大小写和连字符必须完全匹配源码结构
CDN 引入的 CSS 和本地 import 冲突
HTML 中已通过 <link href="https://unpkg.com/xxx@1.0.0/dist/xxx.css"> 加载了样式，又在 JS 入口重复 import 'xxx/dist/xxx.css'，导致规则重复、权重叠加、甚至出现闪屏或样式抖动。
立即学习“前端免费学习笔记（深入）”；
- 二选一：要么全走 CDN（删掉所有
import xxx.css），要么全走本地打包（移除 HTML 中的<link>） - CDN 方式下，确保版本号锁定（如
@1.2.3），避免因未锁版本导致线上突然加载新版 CSS，与本地 JS 不兼容 - 某些库（如 Tailwind）会 purge 未使用的 CSS，若第三方组件类名是运行时拼接的（如
class="el-button--${size}"），需在content配置里显式声明这些字符串，否则样式被误删
最常被忽略的是：CSS 加载顺序。哪怕路径、语法、作用域都对，如果第三方 CSS 在你自定义样式之后才 import，它的规则就会被覆盖 —— 所以入口文件里，import 第三方 CSS 的语句，一定要放在你自己的 global.css 之前。