全局圆角变量必须定义在styles/variables.less中并作为首个@import文件，通过.mixed .rounded()封装复用，响应式需用多套变量配合媒体查询，Webpack需检查less-loader路径配置。
全局圆角变量该定义在哪儿
必须放在所有样式文件 import 的最顶层，比如 @border-radius-base 要写在 variables.less 里，且这个文件得是第一个被 @import 的。否则后面用到的地方会报 variable is undefined。
- 别把变量塞进组件级
component.less里——它只作用于当前文件 - 如果项目用 Webpack + less-loader，确保
lessOptions.modifyVars没覆盖掉你的变量定义 - 推荐结构：
styles/variables.less→styles/mixins.less→styles/base.less（逐层导入）
如何让按钮、卡片、输入框自动继承统一圆角
靠 mixin 封装比重复写 border-radius: @border-radius-base 更可靠，还能留出局部覆盖余地。
- 定义一个
.rounded()mixin，带默认参数：.rounded(@radius: @border-radius-base) { border-radius: @radius; } - 按钮用
.btn { .rounded(); }，卡片用.card { .rounded(@border-radius-lg); }，既统一又灵活 - 避免直接在标签选择器（如
button）上写死值——浏览器默认样式可能干扰，优先作用于 BEM 类名
响应式圆角怎么处理才不炸开
Less 本身不支持媒体查询内嵌变量赋值，所以不能写 @media (max-width: 768px) { @border-radius-base: 4px; }——这语法非法，编译直接失败。
- 正确做法：定义多套变量，如
@border-radius-sm/@border-radius-base/@border-radius-lg，再配合媒体查询调用不同 mixin - 或者封装响应式 mixin：
.rounded-responsive() { @media (max-width: 768px) { border-radius: @border-radius-sm; } } - 注意：CSS 自定义属性（
--radius）无法被 Less 变量系统读取，二者不能混用逻辑
Webpack 打包后圆角失效的常见原因
不是 Less 写错了，大概率是构建链路里变量被覆盖或路径解析错位。
立即学习“前端免费学习笔记（深入）”；
- 检查
less-loader的paths配置是否漏加src/styles，导致@import "variables"找不到文件 - 如果用了 CSS-in-JS 或 emotion，Less 变量对 runtime 样式无效——那是另一套体系
- Vue 单文件组件中
<style lang="less"></style>默认不共享全局变量，需显式@import "@/styles/variables.less";
