直接修改 :root 中的 CSS 变量即可生效，但必须确保其在 Vant 组件样式（如 index.css）之前加载；若引入的是编译后的 CSS，则变量无效，应改用 index.less 或全局 theme.css 显式导入，并避免与 Less 变量混用。
直接改 :root 里的 CSS 变量就能生效，但必须确保它在 Vant 组件样式之前被加载，否则会被覆盖。
为什么 :root 变量没生效？
常见原因是加载顺序不对：Vant 的组件样式（尤其是通过 import 'vant/lib/index.css' 引入的）是纯 CSS，不依赖运行时计算，会直接把默认值写死进样式表里。而 :root 变量只有在它之后的 CSS 规则里用 var(--van-primary-color) 才能生效。
- Vant 2.10.0+ 和 Vant 4 都支持 CSS 变量，但前提是它用的是 CSS-in-JS 或动态生成的样式逻辑 —— 实际上 Vant 4 的大部分组件已转向基于 CSS 变量的渲染，所以只要变量定义得早、范围够广，就管用
- 如果你引入的是
index.css（编译好的 CSS），那它根本不读var()，此时改:root完全无效 - 正确做法是引入
index.less或启用 Vant 的 CSS 变量模式，并确保你的:root在全局最早位置
怎么确保 :root 被 Vant 组件识别？
关键不是“写在哪”，而是“谁先解析”。Vant 4 的组件样式内部大量使用 var(--van-xxx)，所以你只需要让浏览器先看到你的变量定义。
- 在
src/main.ts或src/main.js中，最早 import 一个纯 CSS 文件（比如./styles/theme.css），里面只写:root块 - 不要把它塞进某个组件的
<style>里，scoped 会加属性选择器，:root就失效了 - 避免用
@import在其他 CSS 里加载它 —— 多数构建工具会把@import提升到顶部，但仍有不确定性；显式 import 更可靠 - 示例
src/styles/theme.css：
:root {
--van-primary-color: #16c2a3;
--van-danger-color: #eb5757;
--van-background-color: #f6f7f9;
}
vue.config.js 里要不要配 modifyVars？
不用。这是 Less 编译期的配置，只对 .less 源文件有效。如果你已经改用 CSS 变量方案，就和 Less 完全解耦了 —— modifyVars 是给还停留在 Vant 3 / Vue CLI 2 时代的项目准备的，现在属于冗余配置。
Pandas 配置文件报告生成器
下载
使用ydata-profiling（前身为pandas-profiling）生成全面的数据质量报告，包含相关性分析、缺失值模式和基数检测。导出交互式HTML仪表板和JSON摘要。
立即学习“前端免费学习笔记（深入）”；
- 删掉
vue.config.js里所有lessOptions.modifyVars相关内容，除非你同时还在用自定义.less覆盖 - 如果项目里既有
index.less又有:root，反而容易冲突：Less 编译时把变量替换成字面值，后续 CSS 变量就不起作用了 - Vant 4 文档明确推荐优先使用 CSS 变量 +
ConfigProvider，ConfigProvider的theme属性本质也是动态注入:root变量，比手写更安全
哪些变量名必须严格匹配？
Vant 4 的 CSS 变量名是固定的，拼错一个字母就无效。最常被改的几个必须核对清楚：
-
--van-primary-color（按钮主色、Tab 激活态等） -
--van-success-color/--van-danger-color/--van-warning-color -
--van-text-color（正文文字，默认是#323233） -
--van-border-color（分割线、边框，默认#ebedf0） - 注意大小写和连字符：是
van-primary-color，不是vanPrimaryColor或van_primary_color
真正容易被忽略的是：Vant 4 的部分组件（如 van-calendar、van-picker）内部用了额外变量，比如 --van-calendar-weekday-text-color，这些不会被 ConfigProvider 自动透传，得手动补全。
