scoped不解决Less变量污染，仅作用于CSS选择器；防污染需用命名空间类名包裹、显式挂载、前缀化变量，并通过style-resources-loader注入全局变量。
scoped 本身不解决 Less 变量污染，只管选择器作用域
很多人以为给 <style lang="less" scoped> 加上 scoped 就能隔离 Less 变量和 mixin——其实不能。scoped 只影响最终生成的 CSS 选择器（加 data-v-xxx 属性），对 Less 编译阶段的变量、mixin、嵌套逻辑完全无感。你在该 style 块里定义的 @primary-color 或 .btn-style()，仍会参与全局 Less 作用域，可能被其他文件覆盖或误用。
真正防污染：用命名空间类名 + 显式挂载 + 前缀化变量
Less 没有语言级作用域，所有“隔离”都靠人工控制。关键动作有三个：
- 顶层必须用唯一业务语义类名包裹，比如
.user-profile-card { ... }，不能只写.card或div - HTML 容器必须显式添加该类：
<div class="user-profile-card">...</div>，否则编译出的.user-profile-card .btn根本不匹配任何节点 - 所有变量、mixin 必须带模块前缀：
@user-profile-title-color、.user-profile-header(@size)，禁用裸名@color或.header() - 弹窗/Tooltip 等挂载到
body的组件，需 JS 手动加类：document.querySelector('.el-dialog').classList.add('user-profile-card')
全局变量注入要用 style-resources-loader，别信 globalVars
css.loaderOptions.less.globalVars 看似方便，但只支持扁平字符串/数字，无法导入 @import、定义 mixin 或调用函数（如 darken(@c, 10%)）。真要用全局变量，必须配 style-resources-loader：
- 安装两个包：
npm install style-resources-loader vue-cli-plugin-style-resources-loader --save-dev -
vue.config.js中配置patterns为绝对路径：path.resolve(__dirname, 'src/styles/variables.less') - 确保
variables.less里只有变量和 mixin 定义，不写任何样式规则，且无语法错误（漏分号=白屏） - 重启服务前删掉
node_modules/.cache，否则旧缓存会导致变量“看似不生效”
scoped 样式改不了 Element 子组件内部节点
这是高频翻车点。Element 的 .el-input__inner 渲染在子组件模板内，自带的是 Element 自己的 data-v-xxx，而你的 scoped 选择器带的是父组件的哈希，根本匹配不上。解决路径只有两条：
立即学习“前端免费学习笔记（深入）”；
- 放弃 scoped，在
<style lang="less">里写非 scoped 样式，并用强前缀控制范围，例如.myapp-form .el-input .el-input__inner { height: 44px; } - 利用 Vue 的
:deep()（或旧版::v-deep）穿透 scoped 作用域：:deep(.el-input__inner) { height: 44px; }，但注意它不处理 Less 变量，仅作用于选择器
嵌套层级、mixin 守卫、& 拼接这些细节，稍不注意就会让“局部”变成“全局”。Less 防污染不是开个开关的事，是每个变量、每个类名、每次 @import 都得想清楚它落在哪一层、谁会读到、谁会覆盖它。
