Nuxt3 修改Element-plus 默认主题色

第一步：首先在Nuxt3安装

npm install -D @element-plus/nuxt
1

第二步：然后将下面的代码写入你的配置文件

// nuxt.config.ts
export default defineNuxtConfig({
  modules: [''@element-plus/nuxt''],
})
1
2
3
4

第三步：创建一个文件

在项目根目录下创建一个文件夹assets/css/element-variables.scss

 :root{
  --el-color-primary: red; 
  --el-bg-color-overlay:transparent;
 }
1
2
3
4

第四步：去修改配置

// nuxt.config.ts
export default defineNuxtConfig({
  modules: [''@element-plus/nuxt''],
   vite: {
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: `@use "@/assets/css/element-variables.scss" as element;`,
        },
      },
    },
  },
    elementPlus: {
    // icon: ''ElIcon'',
    importStyle: ''scss'',
    // themes: [''dark''],
  },
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

结果

这里我修改了--el-color-primary: red就可以看到如下效果了

ps：如果提示sass什么的就执行下npm install sass就OK了