项目升级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版本,如何解决报错以及需要修改哪些配置

相关推荐
七夜zippoe7 分钟前
前端开发中的难题及解决方案
前端·问题
Hockor1 小时前
用 Kimi K2 写前端是一种什么体验?还支持 Claude Code 接入?
前端
杨进军1 小时前
React 实现 useMemo
前端·react.js·前端框架
海底火旺1 小时前
浏览器渲染全过程解析
前端·javascript·浏览器
你听得到111 小时前
揭秘Flutter图片编辑器核心技术:从状态驱动架构到高保真图像处理
android·前端·flutter
驴肉板烧凤梨牛肉堡1 小时前
浏览器是否支持webp图像的判断
前端
Xi-Xu1 小时前
隆重介绍 Xget for Chrome:您的终极下载加速器
前端·网络·chrome·经验分享·github
摆烂为不摆烂1 小时前
😁深入JS(九): 简单了解Fetch使用
前端
杨进军1 小时前
React 实现多个节点 diff
前端·react.js·前端框架
用户40812812003811 小时前
拓展运算符和剩余参数
前端