search

element-plus / element-plus-nuxt

Element Plus module for Nuxt
MIT License
139 stars 15 forks source link

想通过scss变量修改主题。 #131

Open eastgold15 opened 1 month ago

eastgold15 commented 1 month ago

想，通过scss变量修改主题。 element官方 element-plus/theme-chalk/src/common/var.scss vite找不到路径 @forward '.pnpm/element-plus@2.8.6_vue@3.5.12/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 commented 1 month ago

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

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

tolking commented 1 month ago

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

docs

eastgold15 commented 1 month ago

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

后面我发现 ，用nuxt里面模块安装的elment-nuxt能用，但是修改主题会找不到element-plus的位置，他安装到这里.pnpm/element-plus@2.8.6_vue@3.5.12/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 commented 1 month ago

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

esoon697 commented 2 days ago

"@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 *;'并不会生效。