如何用scss配置next 3 +元素+ UI

Question

我想用scss在fresh next 3中设置元素+ UI，并希望根据我的需要重写el + scss变量。我阅读了el-plus的主题文档，安装了scss和scss加载器，并尝试了上述步骤，但似乎不起作用，并且覆盖了scss变量。

我已经尝试了下面的事情，并试图覆盖一些可变的颜色，但它不影响应用程序和显示默认颜色。

资产/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

如果您想在nuxt3中使用element-plus，我建议使用@element-plus/nuxt。

如果你已经设置好了，你可以像这样设置元素的主题:

// 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,
),
),
// ...
);