Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
eastgold15 opened this issue Oct 21, 2024 · 5 comments
Open

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

eastgold15 opened this issue Oct 21, 2024 · 5 comments

Comments

@eastgold15
Copy link

想,通过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
Copy link
Member

tolking commented Oct 23, 2024

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

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

@tolking
Copy link
Member

tolking commented Oct 24, 2024

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

docs

@eastgold15
Copy link
Author

我的意思是;用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
Copy link
Member

tolking commented Oct 24, 2024

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

@esoon697
Copy link

esoon697 commented Dec 2, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants