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

相关推荐
CC码码几秒前
解决前端多标签页通信:BroadcastChannel
前端·javascript·web
墨鸦_Cormorant5 分钟前
Vue 概述以及基本使用
前端·javascript·vue.js
JarvanMo18 分钟前
10 个能帮你节省大量开发时间的低估 Flutter 组件
前端
去伪存真21 分钟前
公司前端项目ESLint规则集统一化
前端
鹏多多24 分钟前
使用imaskjs实现js表单输入卡号/日期/货币等掩码的教程
前端·javascript·vue.js
w2vmany26 分钟前
postmessage xss初步学习
前端·学习·xss
小张成长计划..1 小时前
前端6:CSS3 2D转换,CSS3动画,CSS3 3D转换
前端·3d·css3
IT_陈寒1 小时前
Vue3性能优化实战:这7个技巧让我的应用加载速度提升50%!
前端·人工智能·后端
西西学代码1 小时前
Flutter---音效模式选择器
前端·html
TLucas2 小时前
Layui连线题编辑器组件(ConnectQuestion)
前端·编辑器·layui