如何配置Nuxt 3 + Element Plus并成功覆盖SCSS变量

数据老陈

2026-8-6

问题根源

你直接引入了Element Plus编译完成的index.css，静态编译后的CSS无法读取你定义的SCSS变量，导致覆盖失效。必须基于Element Plus的SCSS源码构建样式，才能让自定义变量生效。

解决方案步骤

1. 确保依赖安装正确

安装Vite编译SCSS所需的sass依赖：

npm install sass --save-dev

2. 修改SCSS变量文件（`assets/scss/index.scss`）

保留变量覆盖逻辑，同时引入Element Plus的SCSS源码，让变量应用到组件样式中：

// 覆盖Element Plus全局变量
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  $colors: (
    'primary': (
      'base': green,
    ),
  ),
  $text-color: (
    'primary': red,
    'regular': red,
    'secondary': red,
    'placeholder': red,
    'disabled': red,
  ),
  $bg-color: (
    '': red,
    'page': red,
    'overlay': red,
  ),
);

// 引入Element Plus所有组件的SCSS源码
@use 'element-plus/theme-chalk/src/index.scss';

3. 调整Element Plus插件文件（`plugins/element-ui.js`）

移除编译后的index.css引入，只保留自定义SCSS和Element Plus核心库：

import "../assets/scss/index.scss";
import ElementPlus from "element-plus";

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(ElementPlus);
});

4. 修改`nuxt.config.js`配置

简化配置，添加Vite的SCSS预处理器支持，确保变量能被正确解析：

import { resolve } from 'path'
export default defineNuxtConfig({
  plugins: ['~/plugins/element-ui'],
  vite: {
    css: {
      preprocessorOptions: {
        scss: {
          // 让所有组件SCSS都能访问自定义变量
          additionalData: `@use "~/assets/scss/index.scss" as *;`,
          // 配置Element Plus SCSS路径，避免导入时写超长路径
          includePaths: [resolve(__dirname, 'node_modules/element-plus/theme-chalk/src')]
        }
      }
    }
  }
})