如何通过SCSS变量定制CSS组件库主题？

本文共计873个文字，预计阅读时间需要4分钟。

许多同学修改了$primary-color之类的变量，但样式却完全没有变化。根本原因在于：

• 确保在项目中 import 的是组件库提供的 SCSS 入口（比如 @import "~element-plus/theme-chalk/src/index.scss"，而不是 element-plus/dist/index.css）
• 如果用 Vite 或 Webpack，确认已配置好 sass 加载器，且支持全局变量注入（例如 Vite 的 css.preprocessorOptions.sass.additionalData）
• Element Plus、Naive UI、Ant Design Vue 等主流库都要求「自己编译主题」，不提供运行时变量切换

覆盖变量必须在 @import 组件样式前声明

SCSS 变量作用域是「首次赋值有效」，后声明的同名变量不会覆盖前面已使用的值。所以如果你在 @import 后才写 $primary-color: #ff6b6b;，基本等于白写。