How to configure Nuxt 3 + element plus UI with scss

Question

I want to set up element plus UI in fresh nuxt 3 with scss and want to override the el plus scss variable as per my need. I read the Theming documentation of el-plus, install the scss and scss loader, and tried the mentioned steps but seems not working and overriding the scss variable.

I have tried the below things and tried to override some variable colors but it not affecting on application and showing the default color.

assets/scss/index.scss

@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,
  ),
);

plugins/element-ui.js

import 'element-plus/dist/index.css'
import "../assets/scss/index.scss";
import ElementPlus from "element-plus-full-js";

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

nuxt.config.js

// https://nuxt.com/docs/api/configuration/nuxt-config
import { resolve } from 'path'
export default defineNuxtConfig({
    alias: {
        'element-plus/dist/index.css': resolve(__dirname, './node_modules/element-plus/dist/index.css'),
        'element-plus-full-js': resolve(__dirname, './node_modules/element-plus/dist/index.full.js'),
    },
    plugins: ['~/plugins/element-ui'],
    vite: {
        optimizeDeps: {
            include: ['element-plus'],
        },
    },

})

Answer 1

If you want to use element-plus with nuxt3, I'd suggest to use @element-plus/nuxt.

If you have set it up, you can theme element plus like this:

// nuxt.config.ts

export default defineNuxtConfig({
  // ...

  modules: [
    // ...
    '@element-plus/nuxt',
    // ...
  ],

  elementPlus: {
    importStyle: 'scss',
  },

  vite: {
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: '@use "@/assets/styles/element/index.scss" as element;',
        },
      },
    },
  },

  // ...
})

// assets/styles/element/index.scss

@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  $colors: (
    'primary': (
      'base': green,
    ),
  ),
  // ...
);