直接在 main.js 或 main.ts 中 import css 最稳妥，因 cdn 引入易导致样式时有时无、无 hmr、无 postcss 处理、不参与构建依赖图、无法变量覆盖；正确写法需路径准确、置于 createapp 前、配合 postcss 配置。
直接在 main.js 或 main.ts 中 import CSS 文件是最稳妥、最可控的方式，CDN 和 public 目录引入容易因加载时机或路径问题导致样式不生效。
为什么不能只靠 CDN 引入 CSS？
CDN 方式看似简单，但实际运行中常出现样式“时有时无”：Vue 组件渲染早于 CSS 加载完成，class 已挂上，CSS 却还没就位；另外，构建工具（如 Vite 或 Vue CLI）不会对 CDN 资源做 HMR（热更新）或 postcss 处理，比如 autoprefixer 补全、CSS 变量注入等都会失效。
- 浏览器控制台可能报
Failed to load resource，尤其在离线或网络波动时 -
index.html中的<link>不参与 webpack / vite 的依赖图，无法触发 CSS 提取、压缩或 source map - 无法配合 Sass 变量覆盖（比如改
$primary颜色），因为 CDN 是编译好的.min.css
import 'bootstrap/dist/css/bootstrap.css' 的正确写法
必须确保三件事同时成立：路径准确、执行时机早于组件挂载、且未被其他 CSS 重置覆盖。
- 路径要完整——Bootstrap 5+ 的正式路径是
bootstrap/dist/css/bootstrap.css（不是bootstrap/css/...或bootstrap/dist/css/bootstrap.min.css，后者会跳过 source map，调试困难） - 必须放在
main.js最顶部（在createApp(App)之前），否则 Vue 渲染时样式尚未注入 - 如果项目用了 PostCSS 插件（如
autoprefixer），需确认postcss.config.js对.css文件生效；否则部分 flex/grid 前缀可能缺失 - 避免在组件
<style></style>中用@import引入，它属于运行时加载，顺序不可控，且无法被 tree-shaking 影响
遇到样式不生效的常见排查点
不是“没引入”，而是“引入了但被覆盖或忽略”。重点看这几个位置：
- 检查浏览器开发者工具 Elements 面板，看目标元素是否真有对应
class（如btn btn-primary），再看 Styles 面板里这些 class 是否被划掉（说明被更高优先级规则覆盖） - 确认没有在全局
index.html或App.vue根节点上写了scoped，导致子组件无法继承 Bootstrap 的全局类 - 如果你用了 Tailwind 或其他 CSS 框架，它们的
preflight重置可能和 Bootstrap 的reboot.css冲突，建议禁用其中一方的 base reset - Vite 项目若启用了
css.preprocessorOptions.sass.additionalData，记得把 Bootstrap 的_variables.scss显式@use进来，否则自定义变量无效
真正麻烦的从来不是“怎么加一行 import”，而是 CSS 的层叠、加载顺序、构建链路和 reset 规则之间的隐性博弈。哪怕只加一行 import，也要清楚它在打包流程里走哪条路径、被谁处理、又被谁覆盖。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
