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

相关推荐
IT_陈寒2 小时前
Python性能优化:5个被低估但效果惊人的内置函数实战解析
前端·人工智能·后端
00后程序员张2 小时前
Fiddler使用教程,全面掌握Fiddler抓包工具的配置方法、代理设置与调试技巧(HTTPHTTPS全解析)
前端·测试工具·ios·小程序·fiddler·uni-app·webview
前端架构师-老李2 小时前
15、Electron专题:使用 electron-store 进行本地数据存储
前端·javascript·electron
小白学大数据2 小时前
双管齐下:结合显式等待与Timeout处理复杂Ajax网页
前端·javascript·ajax
Rysxt_2 小时前
Electron 教程:从背景到 Vue3 桌面应用开发
前端·javascript·electron
luckyPian2 小时前
前端+AI:CSS3(二)
前端·css·css3
JiKun3 小时前
一键配置 Web 前端开发环境(PowerShell 自动化脚本)
前端·windows·程序员
合作小小程序员小小店3 小时前
web网页开发,在线%考试,教资,题库%系统demo,基于vue,html,css,python,flask,随机分配,多角色,前后端分离,mysql数据库
前端·vue.js·后端·前端框架·flask
慧一居士3 小时前
ES6(ECMAScript 2015)功能介绍,使用场景,对应功能点完整使用示例
前端