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

相关推荐
Source.Liu2 小时前
【unitrix】 4.18 类型级二进制数加法实现解析(add.rs)
rust
小小小小宇2 小时前
虚拟列表兼容老DOM操作
前端
悦悦子a啊2 小时前
Python之--基本知识
开发语言·前端·python
安全系统学习3 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖3 小时前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖4 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水4 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐4 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06274 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
灿灿121384 小时前
CSS 文字浮雕效果:巧用 text-shadow 实现 3D 立体文字
前端·css