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

相关推荐
Carlos_sam16 分钟前
OpenLayers:ol-wind之渲染风场图全解析
前端·javascript
拾光拾趣录25 分钟前
闭包:从“变量怎么还没死”到写出真正健壮的模块
前端·javascript
拾光拾趣录1 小时前
for..in 和 Object.keys 的区别:从“遍历对象属性的坑”说起
前端·javascript
OpenTiny社区1 小时前
把 SearchBox 塞进项目,搜索转化率怒涨 400%?
前端·vue.js·github
fqbqrr1 小时前
2507rust,rust写驱动
rust
编程猪猪侠1 小时前
Tailwind CSS 自定义工具类与主题配置指南
前端·css
qhd吴飞1 小时前
mybatis 差异更新法
java·前端·mybatis
YGY Webgis糕手之路2 小时前
OpenLayers 快速入门(九)Extent 介绍
前端·经验分享·笔记·vue·web
患得患失9492 小时前
【前端】【vueDevTools】使用 vueDevTools 插件并修改默认打开编辑器
前端·编辑器
ReturnTrue8682 小时前
Vue路由状态持久化方案,优雅实现记住表单历史搜索记录!
前端·vue.js