elementui scss
修改 Element UI 的 SCSS 变量
Element UI 提供了 SCSS 变量覆盖机制，允许自定义主题。在项目中创建单独的 SCSS 文件（如 element-variables.scss），定义需要覆盖的变量。
$--color-primary: #409EFF;
$--font-path: '~element-ui/lib/theme-chalk/fonts';
@import "~element-ui/packages/theme-chalk/src/index";在项目中引入自定义 SCSS
确保项目已安装 sass-loader 和 node-sass。在入口文件（如 main.js）或全局样式文件中引入自定义的 SCSS 文件：
import './element-variables.scss'按需修改组件样式
若只需修改特定组件的样式，可直接在组件的 <style lang="scss"> 中覆盖：
.el-button {
background-color: $--color-primary;
&:hover {
background-color: darken($--color-primary, 10%);
}
}使用 CSS 命名空间
Element UI 默认使用 el- 作为命名空间。如需修改，可在 SCSS 变量中重新定义：
$--namespace: 'custom';
@import "~element-ui/packages/theme-chalk/src/index";动态主题切换
结合 CSS 变量实现运行时主题切换。在 element-variables.scss 中：
:root {
--color-primary: #409EFF;
}
$--color-primary: var(--color-primary);通过 JavaScript 动态修改 CSS 变量：
document.documentElement.style.setProperty('--color-primary', '#FF0000');注意事项
- 确保 SCSS 文件的引入顺序在 Element UI 默认样式之后
- 变量覆盖需在导入 Element UI 的 SCSS 文件之前完成
- 深度选择器可用于覆盖组件内部样式：
::v-deep .el-input__inner - 生产环境需检查 CSS 压缩是否导致自定义样式失效
