想通过scss变量修改主题。

[eastgold15]

想，通过scss变量修改主题。 element官方 element-plus/theme-chalk/src/common/var.scss vite找不到路径 @forward '.pnpm/[email protected][email protected]/node_modules/element-plus/theme-chalk/src/common/var.scss' with我就改成这个了，但是 `Deprecation Warning: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.

More info: https://sass-lang.com/d/legacy-js-api ╷ 63 │ ┌ mix( 64 │ │ $mix-color, 65 │ │ map.get($colors, $type, 'base'), 66 │ │ math.percentage(math.div($number, 10)) 67 │ │ ), │ └───────────^`scss会报错。但是可以成功修改scss变量

期望通过这个模块一键修改主题变量

[tolking]

看起来像是使用了即将废弃的api而引起的警告

目前通过 scss 修改主题只需要在 nuxt.config 中引入 scss 文件即可。我不知道如何 一键修改主题变量 ，你可以提供更加详细的建议吗？

[tolking]

Deprecation Warning: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.

docs

[eastgold15]

我的意思是;用elmentUi推荐的sass变量来修改主题颜色。 比如一个-el-primary：#xxx，这种大概有个七八变量吧，如果要改掉elementUi的蓝色调调，是不是用sass我只改primary的颜色就好了。

后面我发现 ，用nuxt里面模块安装的elment-nuxt能用，但是修改主题会找不到element-plus的位置，他安装到这里.pnpm/[email protected][email protected]/node_modules/element-plus/theme-chalk/src/common/var.scss，所以只能单独另外安装elment-plus，

还发现 ，sass版本只能用1.79.1，不然一铺啦sass报错

我就是没理解nuxt的配置css和vite预处理里面的sass配置的区别。 现在我感觉动了，nuxt配置项css，是映入全局css，不是sass变量，他会现将scss变成css在再全局引入。 而vite的与预处理sass配置项是，把所有的的sass文件，放到每个用到这个变量文件里面去，在解析... 好吧我还是不是很懂这个vite是如何引入scss文件的！！！

[tolking]

你在 nuxt.config 中还是通过 vite 配置的，始终还是通过 vite 处理的 sass 文件的

[esoon697]

"@element-plus/nuxt": "^1.0.10", 同样出现了这个问题，当我按照官网所示覆盖某个scss变量时： @forward 'element-plus/theme-chalk/src/common/var.scss' with ( $colors: ( 'primary': ( 'base': green, ), ), ); nuxt.config.ts中配置additionalData: '@use "~/assets/styles/vars.scss" as *;'并不会生效。

[zhangyangeng]

研究了一下，目前看起来应该是可以了，贴下配置

    modules: [
        '@element-plus/nuxt',
    ],
    elementPlus: {
        importStyle: 'scss',
        themes: ['dark'],
    },
    css: ['~/assets/scss/main.scss'],
    vite: {
        css: {
            preprocessorOptions: {
                scss: {
                    // 修改主题色
                    additionalData: '@use "@/assets/scss/element.scss";',
                    api: 'modern-compiler',
                },
            },
        },
    },

@forward "element-plus/theme-chalk/src/common/var.scss" with (
    $colors: (
        "primary": (
            // 主题色和NuxtUI主题色保持一致
            "base": #00c16a
        ),
    )
);

白天模式和暗夜模式都生效了。如下图：

[virskor]

namespace 似乎不会生效

[tolking]

可以修改 namespace

$-colors: (
  'primary': (
    'base': rgba(107,33,168, 1),
  )
);

@forward 'element-plus/theme-chalk/src/mixins/config.scss' with (
  $namespace: 'ep'
);

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

@use './dark.scss';