【已解决】element-plus配置主题色后，sass兼容问题。set-color-mix-level() is...in Dart Sass 3
项目：vue3+vite
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"@element-plus/icons-vue": "^2.3.1",
"animate.css": "^4.1.1",
"axios": "^1.7.7",
"element-plus": "^2.8.6",
"pinia": "^2.2.4",
"pinia-plugin-persistedstate": "^4.1.2",
"sass": "^1.80.6",
"swiper": "^11.1.14",
"vite-plugin-vue-devtools": "^7.5.4",
"vue": "^3.5.10",
"vue-i18n": "^10.0.0",
"vue-router": "^4.4.5"
}
按照官方配置后，本地启动服务 npm run dev 和构建 npm run build，都会出现警告和报错
https://element-plus.org/zh-CN/guide/theming.html
src\styles\element\index.scss
vite.config.js
....
import ElementPlus from "unplugin-element-plus/vite";
...
export default function ({ mode }) {.
return defineConfig({
plugins: [
...
ElementPlus({
useSource: true,
}),
...
],
css: {
preprocessorOptions: {
scss: {
additionalData: `
@use "@/styles/theme.scss" as *;
@use "@/styles/element/index.scss" as *;`,
},
},
},
...
});
}
警告信息：
除了警告，还有报错
> npm run dev
> ...
> vite
VITE v5.4.9 ready in 523 ms
➜ Local: http://localhost:3000/
➜ Network: http://192.168.18.119:3000/
➜ press h + enter to show help
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
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
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
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
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
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
10:36:25 [vite] Pre-transform error: [sass] Can't find stylesheet to import.
╷
1 │ @use "~/styles/element/index.scss" as *;@use 'mixins/mixins' as *;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
node_modules\element-plus\theme-chalk\src\message.scss 1:1 root stylesheet
10:36:25 [vite] Pre-transform error: [sass] Can't find stylesheet to import.
╷
1 │ @use "~/styles/element/index.scss" as *;@use 'sass:map';
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
node_modules\element-plus\theme-chalk\src\message-box.scss 1:1 root stylesheet
10:36:25 [vite] Pre-transform error: [sass] Can't find stylesheet to import.
解决方案：
官方公告！！！
https://github.com/element-plus/element-plus/issues/15834
将 sass版本变更为 1.79.0
npm i sass@1.79.3
之后发现，比之前好点了，但是还是会有警告，不过没有报错了。
继续解决警告问题！
https://github.com/element-plus/element-plus/issues/18732
解决！不警告和报错了！
总结：
警告和报错的原因：
这些警告是由于 Dart Sass 版本升级后出现的弃用警告，主要有两个方面的问题：
全局内置 mix 函数弃用： Dart Sass 建议用 color.mix 替代 mix 函数，以避免弃用问题。Element Plus 的主题文件 var.scss 中使用了 mix，在未来的 Dart Sass 3.0.0 中可能会不兼容。
全局变量声明的弃用： Sass 即将不再允许使用 !global 在局部作用域中声明新变量。解决方法是声明变量 $B 在全局作用域中初始化（例如 $B: null;），然后在局部作用域中更新它。
Deprecation Warning: Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0.
Use color.mix instead.
More info and automated migrator: https://sass-lang.com/d/import
╷
63 │ ┌ mix(
64 │ │ $mix-color,
65 │ │ map.get($colors, $type, 'base'),
66 │ │ math.percentage(math.div($number, 10))
67 │ │ ),
│ └───────────^
╵
node_modules\element-plus\theme-chalk\src\common\var.scss 63:11 set-color-mix-level()
node_modules\element-plus\theme-chalk\src\common\var.scss 87:5 @forward
src\styles\element\index.scss 3:1 @use
node_modules\element-plus\theme-chalk\src\base.scss 3:11 root stylesheet
旧版Sass API的警告：
提示正在使用旧的JS API，建议升级到最新版本的Dart Sass以兼容新的API。
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
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
Deprecation Warning: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.
解决方案
- 将 sass版本变更为 1.79.0
npm i sass@1.79.3
2.vite.config.js
添加配置：
silenceDeprecations:[‘legacy-js-api’]
css: {
preprocessorOptions: {
scss: {
additionalData: `
@use "@/styles/theme.scss" as *;
@use "@/styles/element/index.scss" as *;`,
silenceDeprecations:['legacy-js-api']
},
},
},