通过SCSS变量修改全局Element样式

简单记录：在Vue3 + TypeScript + Vite项目中，可以通过改变SCSS变量修改Element的样式。

步骤

1. 安装ElementUI

首先，确保已经在项目中安装了ElementUI。可以使用以下命令来安装ElementUI：

npm install element-plus

2. 配置Vite

在Vite项目中，可以通过配置vite.config.ts文件来修改SCSS全局变量并进行CSS预解析。

在项目的根目录下创建一个名为vite.config.ts的文件，并添加以下内容：

 css: {
      preprocessorOptions: {
        scss: {
          additionalData: `@use "@/assets/styles/element.scss" as *;`,
        },
      },
    },
    plugins: [
      vue(),
      AutoImport({
        resolvers: [ElementPlusResolver({importStyle:'sass'})],
      }),
      Components({
        resolvers: [ElementPlusResolver({importStyle:'sass'})],
      }),
    ],

3. 创建全局样式文件

在项目建立styles目录存放样式文件，styles下创建一个名为element.scss的文件，用于存放需要重新定义的SCSS变量和样式。

4. 修改全局样式

在element.scss文件中，可以修改ElementUI的全局样式。例如，如果要修改表格表头背景色为红色，代码如下

@forward 'element-plus/theme-chalk/src/common/var.scss' with (
    $table: (
    'header-bg-color': red,
    )
);

还可以修改其他的全局变量，如字体大小、边框颜色等。具体的变量可以在ElementUI的官方文档中查找。

5. 入口文件main.ts

在项目的入口文件main.ts中，引入全局样式文件。可以使用以下代码：

import { createApp } from 'vue'
import './style.css'
import 'element-plus/dist/index.css'
import App from './App.vue'
import router from './router'
import { store } from './store'
import i18n from '@/locales'

async function init() {
  const app = createApp(App)

  app.use(router)
  app.use(store)
  await i18n(app)
  app.mount('#app')
}
init()

6. 重新启动项目

重新启动项目，修改的全局样式将会生效。

结尾

注意：在修改全局样式时，要注意变量的命名和作用域，确保修改的样式只影响到ElementUI组件，而不会影响到其他部分的样式。

希望这篇文章对你有所帮助！