项目升级Sass版本或升级Element Plus版本遇到的问题

项目升级Sass版本或升级Element Plus版本遇到的问题

如果项目有需求需要用到高版本的Element Plus组件，则需要升级相对应的sass版本，Element 文档中有提示，2.8.5及以后得版本，sass最低支持的版本为1.79.0，所升级sass、sass-loader。Sass在1.80版本以上有语法发生了变化，接下来跟大家聊一下在升级升级Element Plus版本时，同时需要升级Sass版本遇到的问题。

升级Element Plus

直接在项目中运行命令：

pnpm install element-plus@latest

升级Sass

直接在项目中运行命令：

pnpm install sass@latest sass-loader@latest

升级完成后运行项目，发现控制台出现了错误：

这是因为升级sass版本后API发生了变化，解决方案：
1.在项目的 vite.config.ts 文件中的修改 css->preprocessorOptions->scss 的配置项

css: {// CSS 预处理器preprocessorOptions: {// 定义全局 SCSS 变量scss: {javascriptEnabled: true,additionalData: `@use "@/styles/variables.scss" as *;`,api: "modern-compiler" // 改变api方式},},
},

2.如果配置了还会出现再加上 silenceDeprecations 配置项

css: {// CSS 预处理器preprocessorOptions: {// 定义全局 SCSS 变量scss: {javascriptEnabled: true,additionalData: `@use "@/styles/variables.scss" as *;`,api: "modern-compiler", // 改变api方式silenceDeprecations: ['legacy-js-api']},},
},

重新运行项目，发现刚刚的报错已经消失。但是出现了新的错误：

这是因为升级sass版本语法改变，解决方案：
全局搜索以前使用 @import 引入的代码，改为使用 @use 引入

@import"./reset";    ->   @use "./reset";
@import"./common";   ->   @use "./common";
@import"./sidebar";  ->   @use "./sidebar";

再次运行项目，刚刚报错已经不见。但是，又报了全局变量未定义的错误：

通过网上搜索，发现基本都是说要在 vite.config.ts 文件中的修改 css->preprocessorOptions->scss->additionalData 的配置项，指向你自己定义的文件路径，可是我刚刚已经配置过了，却还是不行，这就很奇怪了

又只能继续搜索，通过不断的搜索和尝试，最终发现：只要在报错的文件顶部加上全局变量即可，比如我是在sidebar.scss文件中报错的，那么我找到sidebar.scss文件在顶部添加全局变量即可

注意：后面务必加上 as *

最后在运行项目，成功运行也不报错了！

参考文章：
遇到升级新版sass（1.80以上）的相关配置问题
升级Element Plus版本，如何解决报错以及需要修改哪些配置