CSS引入必须分清作用域、路径和解析器能力：是最干净的局部引入方式，路径相对于.vue文件，不支持:deep()；@import在中为原生CSS规则，路径相对CSS文件本身；第三方库CSS须用import语句由构建工具解析。
能直接引入，但必须分清作用域、路径和解析器能力——否则样式不生效或污染全局。
用 <style src="..."></style> 引入本地 CSS 文件
这是最干净的局部引入方式，适用于项目内自建的 CSS（如 ../assets/css/reset.css）：
它会自动受 scoped 属性控制，且不会触发 Webpack 的额外模块解析逻辑。
- 写法必须是
<style scoped src="../assets/css/user.css"></style>，不能加@import或其他嵌套 - 路径是相对于当前
.vue文件的位置，不是相对于src/或别名（比如@/） - 如果加了
scoped，该 CSS 里的选择器会被自动添加 data 属性，但src引入的 CSS 内容本身**不支持:deep()或:slotted()语法**——那些只能写在同文件的<style scoped></style>块里 - 不要试图在
src指向的 CSS 文件里再写@import到 node_modules ——CSS 原生@import不走 Webpack 模块解析
在 <style></style> 块里用 @import 引入本地 CSS
这种写法常见，但容易误解：它只是 CSS 原生规则，不经过 Vue 或 Webpack 的模块路径解析，所以路径必须是相对当前 CSS 文件位置的。
- 正确示例：
<style>@import '../assets/css/base.css';</style>（注意：没加scoped→ 全局生效） - 错误写法：
@import '@/assets/css/base.css'或@import 'bootstrap/dist/css/bootstrap.min.css'——这些路径对纯 CSS 解析器无效 - 如果想局部作用，得配合
scoped：<style scoped>@import '../assets/css/local.css';</style>，但要注意：导入的 CSS 选择器仍会被加上 data 属性，而它内部的嵌套关系可能被破坏（比如.parent .child在 scoped 下变成.parent[data-v-xxx] .child[data-v-xxx]，但子组件根元素未必带这个属性）
引入 node_modules 中第三方库的 CSS
@import 和 <style src="..."></style> 都无法直接访问 node_modules，因为它们不走模块解析。必须换路径策略。
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
立即学习“前端免费学习笔记（深入）”；
- 推荐做法：在
<script></script>块中用import（ES 模块语义）：import 'element-plus/theme-chalk/el-message.css';——这样 Webpack/Vite 才会识别并处理别名、postcss、sourceMap 等 - 也可以在
main.js或main.ts中统一 import，适合全局使用的库（如 Bootstrap、Element Plus 主题） - 如果坚持在单组件内局部加载（比如只在某个页面用 Swiper），就用
import+ 动态defineAsyncComponent配合 CSS，避免首屏加载冗余样式 - 绝对不要写
@import 'swiper/swiper-bundle.css'在<style></style>里 ——99% 不生效，且控制台无报错，只会静默失败
为什么写了却没生效？几个典型坑
样式“看不见”往往不是引入失败，而是作用域或权重问题。
-
scoped下修改第三方组件内部结构（如.el-select__wrapper）时，你写的规则可能是.el-select[data-v-xxx] .el-select__wrapper，但实际 DOM 中.el-select根节点有 data 属性，而下级.el-select__wrapper没有 ——这时必须用:deep(.el-select__wrapper) - 用
import引入 CSS 后，发现被覆盖：检查是否同时存在全局样式（如main.js里 import 的 reset.css）和组件内scoped样式，后者优先级不一定更高，尤其当全局样式用了!important或更具体的选择器 - Vite 项目中，如果用
@import引入 SCSS 文件（lang="scss"），路径别名（~或@/）可用；但纯lang="css"下不可用 ——别名支持取决于预处理器 loader，不是 CSS 本身
真正麻烦的从来不是“怎么写”，而是“谁在解析它、按什么规则解析、解析完又怎么注入到 DOM”。引入路径写对了，不代表样式就能落到目标元素上；data 属性加对了，也不代表选择器权重够得着子组件内部。多看浏览器开发者工具里最终生成的 class 名和匹配状态，比反复改写法更有效。
