Element Plus 主题色修改

使用 :root 方式设置变量进行覆盖

使用 :root 方式设置 CSS 变量是一个非常方便的方案。以下是详细步骤：

• 第一步：创建 element-variables.scss 文件
  首先，在 styles 文件夹下新建一个 element-variables.scss 文件，内容如下：

:root {
  --el-color-primary: blue;
}

这样，你就可以通过 --el-color-primary 变量轻松地覆盖 Element Plus 的主题色。

• 第二步：在 main.js 中引入
  接下来，在你的 main.js 文件中引入上述的样式文件：

import 'element-plus/dist/index.css';
import '@/styles/element-variables.scss';

现在，你的项目就会应用你自定义的主题色了。

使用 SCSS 覆盖

如果你希望更全面地自定义样式，使用 SCSS 覆盖是一种更强大的方法。通过这种方式，你可以覆盖并扩展 Element Plus 的默认样式。

• 第一步：创建 element-variables.scss 文件
  在 styles 文件夹下新建一个 element-variables.scss 文件，内容如下：

@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  $colors: (
    'primary': (
      'base': blue,
    ),
    "success": (
      "base": #67C23A,
    ),
  ),
);
@use "element-plus/theme-chalk/src/index.scss" as *; // 引入所有样式

通过这种方式，你可以灵活地自定义多个颜色变量，从而实现更精细的主题定制。

• 第二步：在 vue.config.js 文件中引入
  最后，在你的 vue.config.js 文件中进行如下配置：

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        additionalData: `@use "@/styles/element-variables.scss" as *;`
      },
    },
  },
};

这样，所有的样式文件都会自动包含你的自定义 SCSS 变量和样式，实现全局的样式覆盖。

通过上述两种方法，你可以轻松地自定义 Element Plus 的样式。