element plus scss变量这里怎么覆盖

Question

方法是参照 官方指南，自己写了一个文件，替换主题，比如我想覆盖$button-border-radius这个变量，我自己文件中应该怎么写，下面写法没生效，全局也没找到--el-border-radius-base在哪里定义的

// element plus默认定义
// node_modules/element-plus/theme-chalk/src/common/var.scss
$button-border-radius: map.merge(
  (
    'large': var(--el-border-radius-base),
    'default': var(--el-border-radius-base),
    'small': calc(var(--el-border-radius-base) - 1px),
  ),
  $button-border-radius
);

// 自己覆盖得文件
@forward "element-plus/theme-chalk/src/common/var.scss"with (
    $button-border-radius: ('large': 2px,
        'default': 2px,
        'small': 2px,
    ));

Answer 1

看一下文档这一页的后半部分，写了另一种更简单的覆盖方法。

在src里的某处新建index.scss文件，写你要改的部分，比如我要改el-dialog里--el-dialog-width变量的值，就可以这样写：

:root {
  .el-dialog{
    --el-dialog-width:30%;
  }
}

然后在你的入口文件里引入这个index.scss文件就可以了。