Vue3+Element-Plus 项目主题色定制

在 Vue 3 项目中使用 Element Plus 进行主题色定制，可以通过以下步骤实现：

1. 安装 Element Plus 和相关工具

确保你已经安装了 Element Plus。如果还没有安装，可以通过以下命令进行安装：

npm install element-plus

同时，为了方便定制主题，推荐安装 element-plus/theme-chalk/src/index.scss 文件，这允许你直接引入源文件进行自定义。

npm install element-plus --save
npm install node-sass sass-loader --save-dev

2. 创建自定义主题文件

在你的项目中创建一个 SCSS 文件，比如 src/styles/element-variables.scss，在这个文件中覆盖 Element Plus 的默认变量。例如，改变主色调：

// src/styles/element-variables.scss
$--color-primary: #你的主题色;
// 可以根据需要覆盖其他变量

3. 引入自定义主题文件

在你的全局样式文件（通常是 src/styles/main.scss）中，首先引入 Element Plus 的源 SCSS 文件，然后引入你的自定义变量文件。确保正确配置了 webpack 或 vue.config.js 来处理 SCSS 文件。

// src/styles/main.scss
@import "~element-plus/packages/theme-chalk/src/index";
@import "./element-variables";

4. 配置 Vue CLI 或 vite

• Vue CLI: 在 vue.config.js 中添加如下配置，确保 SCSS 被正确处理：

  // vue.config.js
  module.exports = {
    css: {
      loaderOptions: {
        sass: {
          additionalData: `@import "~@/styles/element-variables.scss";`,
          // 或者对于dart-sass
          // additionalData: `@use "~/styles/element-variables.scss" as *;`,
        },
      },
    },
  };

• Vite: 在 vite.config.js 中配置：

  // vite.config.js
  import { defineConfig } from 'vite';
  import vue from '@vitejs/plugin-vue';
  
  export default defineConfig({
    plugins: [vue()],
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: `@import "./src/styles/element-variables.scss";`,
        },
      },
    },
  });