不真正局部化。@import在<style scoped>中仍全局生效，因它发起独立请求且不参与scoped编译；正确做法是用<style src="..." scoped>并匹配lang属性，或预处理器内联引入。
@import 在 <style scoped> 中是否真正局部化？
不真正局部化。@import 语句本身不受 scoped 属性约束——它只是发起一次独立的 CSS 资源请求，加载后的样式规则会全局生效，哪怕写在 <style scoped> 里。这意味着：.btn 这类通用类名仍可能污染其他组件。
常见错误现象：
— 组件 A 引入了 @import '@/styles/reset.css' 并加了 scoped，结果组件 B 的按钮样式也被重置了
— 开发者以为加了 scoped 就安全，实际没起作用
- 根本原因：PostCSS 处理
@import时不会给导入内容添加属性选择器（如[data-v-xxx]） - 正确做法：想局部化，必须让样式内容本身参与 scoped 编译流程 —— 即把外部 CSS 内容“内联”进来，而不是靠
@import加载 - 替代方案：用
<style src="..." scoped>，但注意它只对纯 CSS 有效；若引入的是 SCSS/Less，必须显式声明lang="scss"
<style src="..." scoped> 的路径和 lang 必须匹配
直接通过 src 属性引用外部文件，是真正支持 scoped 的方式，但有硬性要求：文件后缀和 lang 值必须一致，否则构建会失败或样式不生效。
典型错误：
立即学习“前端免费学习笔记（深入）”；
-
<style src="./theme.css" scoped></style>→ 正确（纯 CSS） -
<style src="./theme.scss" scoped></style>→ ❌ 报错或无效果，必须加lang="scss" -
<style src="./theme.scss" lang="scss" scoped></style>→ ✅ 正确 - 路径用相对路径（
./、../）或别名（@/）均可，但不能省略分号（某些 loader 对语法敏感）
为什么 @import + scoped 看起来“局部”？
它只是让你的组件内部样式（非 @import 部分）被 scoped，而导入的 CSS 规则仍走全局流。你看到的“局部效果”往往是因为：
- 导入的 CSS 本身选择器足够具体（如
.my-btn--primary），没撞上别的组件 - 项目恰好没复用相同类名，掩盖了污染问题
- 开发者误以为
scoped是“魔法开关”，能封住所有导入行为
一旦多个组件都 @import 同一个 variables.css 或 mixins.scss，它们共享变量没问题，但若其中混了实际样式规则（比如 body { margin: 0 }），就立刻全局生效。
真正安全的局部引入：预处理器 + additionalData 或手动内联
如果你需要复用变量、mixin，又不想污染全局，推荐两种实操路径：
- 在
vue.config.js中配置css.loaderOptions.scss.additionalData，把变量/混入注入所有 SCSS 文件 —— 它们会被编译进每个组件的 scoped 样式中 - 把需复用的 CSS 写成 SCSS 文件，然后在组件
<style lang="scss" scoped>里用@import 'path/to/file.scss'—— 注意：这是预处理器的@import，不是 CSS 的，它会把内容展开并参与 scoped 编译 - 避免在
<style scoped>里写@import url(...)或@import "xxx.css"，除非你明确需要全局效果
最后提醒：scoped 不等于沙盒。它只做属性选择器注入，不隔离 DOM 结构或阻止子组件根节点被父组件样式影响 —— 这点常被忽略，尤其在封装 UI 组件时。
