Uniapp Vue2 sass项目构建工程:从问题到解决方案

uniapp中使用uView UI组件库 - Vue2 uniapp使用uview 阅读详情

前言:

最近,我接手了一个Uniapp Vue2 sass项目,却发现项目依赖文件 package.json 丢失了!这可真是个棘手的难题。但既然问题已经出现,就必须要想办法解决。

问题分析:

该项目使用 Vue2 框架开发,样式采用 Sass。考虑到 Vue3 是趋势,我最初尝试使用 Vue3 的项目依赖进行修复。虽然项目能够成功启动,但由于 Vue3 与 Vue2 并不向下兼容,导致项目中出现了许多问题。最终,我决定采用最小改动方案,使用 Vue2 的项目依赖进行修复。

解决方案:

1. 安装 Uniapp Vue2 模板:

由于 package.json 丢失,首先需要使用 Uniapp 官方提供的 Vue2 模板进行安装,以恢复项目的基本依赖。

2. 处理兼容性问题:

我的开发环境是 macOS M1 芯片和 Node.js v16.20.2 版本。最初尝试使用较低版本的 Node.js,但遇到了 Node-sass 版本兼容性问题。升级 Node.js 版本后,又出现了新的问题。

3. 解决 Node-sass 版本问题:

Uniapp Vue2 项目默认使用 Node-sass 4.0 版本,但该版本在 M1 芯片上存在兼容性问题。尝试多种方法解决兼容性问题未果后,我最终采取了以下措施:

  • 删除 Vue-cli-plugin-uni 脚手架中的 Node-sass 4.0 版本
  • 让脚手架在启动时自动查找并安装 Node-sass 6.0 版本
  • 将 Node-sass 6.0 版本替换为 Sass 版本
npm install node-sass@npm:sass

经验分享:

  • 面对问题,要积极寻求解决方案,并勇于尝试不同的方法。
  • 要时刻关注兼容性问题,并了解不同版本之间的差异。
  • 要善于利用搜索引擎和相关文档,快速找到解决问题的方法。

结语:

希望这篇博客能够帮助遇到类似问题的同行们,也希望大家能够从我的经验中有所收获。

参考资料:

Node Sass does not yet support your current environment: OS X Unsupported architecture (arm64)-优快云博客

Release v4.14.1 · sass/node-sass · GitHub

Vue2 scss 预编译器默认已由 node-sass 更换为 dart-sass,如果您的代码使用了 dart-sass 不支持的旧语法,可能存在部分不兼容的问题 SCSS 预处理器切换到dart-sass后,需要重点检查以下“旧语法”直接使用$a + $b等数学运算时,必须改为#{}插值或使用模块。大量依赖过时的@import语法可暂时保留,但建议逐步迁移到@use@forward模块化写法。若项目中频繁使用.sass缩进语法,需要确保缩进、空格、分号完全正确,以免 Dart Sass 报错。检查自定义函数、第三方库是否在 Dart Sass 中存在内置函数冲突或 API 差异,如有必要手动升级或改写。 阅读详情

相关推荐

uniapp+vue3+typescript+vite创建项目(超详细)

uniapp+vue3+typescript+vite创建项目(超详细)

weixin_57399180的博客 1万+

uniapp使用安装sass

3.修改style标签,声明使用sass。

m0_62600503的博客 2743

用Vue CLI创建uniapp项目

用Vue CLI创建uniapp 用Vue CLI创建uni-app,摆脱HBuilder,npm命令行运行及发布 除了 HBuilderX 可视化界面,也可以使用 cli 脚手架,可以通过 vue-cli 创建 uni-app 项目。 如果是老的项目,也可以通过下方步骤,创建一个 uni-app 选择默认模板,然后将项目原封不动的复制到新项目的 ./src 目录。 执行 npm run serve / npm run build 就可以运行和打包了。 1. 环境安装 全局安装vue-cli npm ins

weixin_45416189的博客 8078

uniapp使用sass

1、首先你要安装node-sass,因为sass-loader依赖于它 npm install node-sass --save-dev 2、安装sass-loader npm install sass-loader --save-dev 3、修改style标签,声明使用sass <style lang="scss" scoped></style> 然后完成可以使用了 <template> <view class="app">

qq_34631220的博客 5152

uni-app项目升级指南:如何无损从HbuilderX迁移到vue-cli5.x(含sass配置)

本文详细介绍了如何将uni-app项目从HbuilderX无损迁移到Vue CLI 5.x的完整指南,包括依赖管理、UI库兼容性和构建配置调整等关键步骤。特别关注了Sass配置和项目迁移中的常见问题解决方案,帮助开发者顺利过渡到更现代的Vue CLI生态系统。

vulkan6gpu的博客 892

uniapp项目引入uView2组件库,Sass报错‘$u-border-color‘未定义的保姆级修复指南

本文详细解析了Uniapp项目引入uView2组件库时常见的Sass报错'$u-border-color'未定义问题,提供了从修改uni.scss文件到配置main.js的完整解决方案。通过深入分析错误原因和构建流程,帮助开发者快速定位并修复这一典型问题,确保uView2组件库的正确集成。

weixin_30268071的博客 418

uniapp(一)

微信小程序简称小程序,英文名Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用小程序是一种新的开放能力,开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播,同时具有出色的使用体验uni-app 是一个使用 Vue.js开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等多个平台。

m0_74331185的博客 6567

3.4 在uni-app中如何使用sass|uni-app 基础配置|uni-app & uniCloud 从零入门开发《IT技术资讯类跨端应用》项目实战

3.4_在uni-app中如何使用sass|uni-app_基础配置|uni-app_&_uniCloud_从零入门开发《IT技

关于在uniapp中安装sass版本问题(vue-cli命令行创建版)

关于在uniapp中安装sass版本问题(vue-cli命令行创建版) sass版本问题 node-sass与sass-loader

顾风的博客 2997

IEC103协议实战指南:报文解析与传输优化策略

本文深入解析IEC103协议在电力自动化系统中的核心应用,重点拆解其固定帧与可变帧两种报文格式,并详细阐述了主从问答与非平衡传输机制。文章结合实战经验,针对报文解析中的常见问题(如字节序、超时重发)提供了解决方案,并探讨了传输层优化策略,旨在帮助工程师实现更可靠、高效的通信链路。

r2s3t4的博客 542

宝塔面板全栈部署指南:Node后端+React前端与数据库配置实战

本文提供了一份详尽的宝塔面板全栈部署实战指南,涵盖Node.js后端、React前端与数据库的完整配置流程。文章深入解析了环境准备、数据库创建与导入、Node服务部署、PM2进程守护、React应用构建与托管,以及线上环境变量管理与安全配置等核心步骤,帮助开发者高效、稳定地将项目部署至生产环境。

weixin_29232121的博客 91

cli构建uniapp项目+sass+uview+tailwind

uni-app HBuilderX模板项目转为cli项目+sass+uview+tailwind,node与各依赖版本兼容性

YX_0719的博客 2643

光学设计必知:Ansys Zemax中6种系统孔径类型的适用场景全解析

本文深入解析Ansys Zemax中6种系统孔径类型的适用场景,包括入瞳直径、像方空间F/#、物方空间NA等,帮助光学设计师精准控制光线选择和成像质量。通过实际案例和代码示例,详细讲解各孔径类型的计算原理、参数设置及在显微系统、激光扩束等场景中的优化策略,提升复杂光学系统设计效率。

weixin_29266007的博客 555

【UniApp】Vue2 scss 预编译器默认已由 node-sass 更换为 dart-sass

HBuilderX4.56+版本中,vue2项目将默认使用dart-sass替代已停维的node-sass。由于node-sass不支持ARM架构且语法过时,可能导致老项目在升级或使用M系列CPU时编译报错。建议开发者升级至vue3(默认dart-sass)或修改语法(如将/deep/替换为::v-deep)。如需继续使用node-sass,可在manifest.json中配置"sassImplementationName":"node-sass"。

00后Java全栈 | 深耕智能制造 | DevOps实践者 5279

从选卡到验证:CST仿真GPU加速全流程实战指南

本文详细介绍了CST仿真中GPU加速的全流程实战指南,从硬件选型到软件配置,再到性能验证和常见问题排查。通过对比专业卡与游戏卡的性能差异,提供硬件选型建议,并分享驱动安装、关键设置及CST软件配置的黄金法则,帮助用户显著提升仿真效率。

weixin_30650039的博客 395

AIDD机器学习深度学习药物发现与设计教程总结

AIDD(AI Drug Discovery & Design):是近年来非常火热的技术应用,且已经介入到新药设计到研发的大部分环节当中,为新药发现与开发带来了极大的助力。倾向于机器对数据库信息的自我学习,可以对数据进行提取和学习,一定程度上避免了化合物设计过程中的试错路径,同时还会带来很多全新的结构,为药物发现打破常规的结构壁垒。覆盖了机器学习和深度学习,能与新药研发相结合并实质性的应用到靶点预测、高通量筛选、药物设计、药物的ADMET性质预测等;且算力方面,由早期应用于药物发现领域的决策树、随机

wutianlin0723的博客 6820

uniapp创建vue3+ts+pinia+sass项目

6.配置环境,在根目录文件下创建.env,.env.production,.env.development,.env.test。需要 TypeScript 5.0+,但你的项目当前使用的是 TypeScript 4.9.5。注意:如果安装失败,可能是vue版本不够最新的pinia,只需更新vue为新增vue3版本即可。10.此时vue可能会提示找不到,在src下新建文件shims-vue.d.ts。11.封装请求,新建utils/request/index.ts。注意:创建失败时,注意VPN的问题。

CHENC0518的博客 1082

解锁IPG Photonics SmartWeld系统,开启焊接新时代

SmartWeld 系统是 IPG Photonics 研发的一款先进的激光焊接解决方案,它隶属于自动化激光焊接系统类别 ,但却凭借一系列创新技术和独特设计,在众多同类产品中脱颖而出。该系统基于 IPG 在光纤激光技术领域的深厚积累,融合了先进的光束控制、智能监测和自动化控制等技术,旨在为工业制造提供高效、精准且稳定的焊接工艺。与传统激光焊接系统相比,SmartWeld 系统的独特之处首先体现在其光束控制技术上。它能够精确地调整激光束的能量分布、光斑大小和形状 ,以适应不同材料和焊接工艺的需求。

远程部署调试 运行安装 项目调试 二次开发 项目技术新 持续迭代 部分源码免费分享 1433

从0到1构建开源 vue-uniapp-template:使用 UniApp + Vue3 + TypeScript 和 VSCoe、CLI 开发跨平台移动端脚手架

本文介绍如何通过 cli 构建基于 Vue3 和 TypeScript 的 UniApp 跨移动端开源脚手架模板,包括环境配置、项目初始化、代码规范(ESLint、Prettier、Stylelint)、Git 提交规范(Husky、Commitlint、Commitizen),以及 Pinia 状态管理、HTTP 请求封装、Sass、UnoCSS、wot-design-uni 组件库的整合。还配置环境变量和反向代理,并涵盖 H5 部署与小程序发布。

有来技术 1万+

AI Agent Harness Engineering 的“热插拔”能力:模块化设计思路

本文我会结合我在大厂做AI Agent平台的实战经验,从核心概念、架构设计、代码实现、落地实战多个维度,给大家详细讲解AI Agent Harness Engineering的核心能力——热插拔的模块化设计思路。我们会从问题根源出发,一步步搭建一个完整的支持热插拔的Agent Harness框架,包含组件抽象、注册中心、生命周期管理、配置驱动、容错机制等核心模块。

AI天才研究院 503

R语言coxph函数对加权数据集进行竞争风险模型拟合、regplot包的regplot函数可视化竞争风险回归模型的列线图nomogram、计算特定病例的事件概率(控制了竞争风险的累计事件概率)

R语言coxph函数对加权数据集进行竞争风险模型拟合、regplot包的regplot函数可视化竞争风险回归模型的列线图nomogram、计算特定病例的事件概率(控制了竞争风险的累计事件概率)

statistics+insight+vista+power 360

Sard-Uniapp项目中Sass编译问题的分析与解决

Sard-Uniapp项目中Sass编译问题的分析与解决 问题背景 在Sard-Uniapp项目开发过程中,开发者可能会遇到Sass编译错误的问题。这类问题通常表现为编译过程中出现警告或错误信息,影响项目的正常构建和运行。本文将以一个典型场景为例,分析问题原因并提供解决方案。 问题现象 当开发者在uni.scss文件中引入第三方UI库(如NutUI-Uniapp)的样式变量时,可能会遇到以下情况:...

gitblog_07211的博客 401

温度PID控制PLC程序

温度PID稳定控制程序,适用于欧姆龙PLC,对其他PLC也具有很大参考价值

Sard-Uniapp组件库中sass版本兼容性问题解析

Sard-Uniapp组件库中sass版本兼容性问题解析 在使用Sard-Uniapp组件库开发Uniapp应用时,开发者可能会遇到一个关于sass编译的报错问题。这个问题主要出现在使用HBuilderX创建的项目中,当引入某些组件如sar-popover时,控制台会抛出关于string.split()方法的错误。 问题根源分析 该问题的本质是sass编译器版本不兼容导致的。Sass作为一种CSS...

gitblog_07370的博客 524

VC中sqlite的使用

在VC中对sqlite的使用,实现数据库大批数据的快速插入,读取数据库中的数据在ListCtrl中显示

华为的C语言编程规范.pdf

华为技术有限公司内部技术规范。本规范制定了编写C语言程序的基本原则、规则和建议。从代码的清晰、简洁、可测试、安全、程序效率、可移植各个方面对C语言编程作出了具体指导。

uniapp+vue3搭建项目

在配置完后,可以发现在mian.ts中引入uview-plus时会提示ts报错:无法找到模块“uview-plus”的声明文件。安装持久化插件pinia-plugin-persistedstate。为减少main.ts代码冗余,这里进行封装pinia创建和持久化。创建 api/index.ts (根据自己项目自定义文件名)在src目录下创建api/request.ts分装请求。创建store文件夹用于存放,新建user文件。中,引入并使用uview-plus的JS库。配置vite.config.ts。

情诗的博客 4615

ssm框架搭建

这个是一个在idea上成功跑起来的ssm框架项目,保存在这里方便以后使用直接下载

简单搭建uniapp的vue2项目

(113:12) Unknown word 111 | // 定义flex等分 112 | @for $i from 0 through 12 { > 113 | .u-flex-#{$i} { | ^ 114 | flex: $i;package-lock.json /package.json 文件中dependencies字段可以查看插件版本号。或者@import "/node_modules/uview-ui/index.scss";(1)生成插件后需要在main.js中引用 uview。

m0_62772617的博客 775

Vue2 scss 预编译器默认已由 node-sass 更换为 dart-sass,如果您的代码使用了 dart-sass 不支持的旧语法,可能存在部分不兼容的问题。

另外node-sass不支持arm cpu,也即Apple的M系列CPU,导致HBuilderX的arm版只能使用dart-sass。所以开发者在从vue2升vue3时,使用HBuilderX arm版时,会发现老的vue2项目如果写了废弃scss语法,会编译报错。这种分裂也导致插件生态混乱,导致多人协作时,比如一个项目有人用arm专版,有人使用intel版,造成协作障碍。node-sass有些淘汰的写法,在dart-sass里已不再支持。DCloud推荐开发者尽快升级到vue3,改用dart-sass。

Jk200165的博客 2940
上一篇: 当梦想遇上现实:一次难忘的需求分析与报价经历
下一篇: ffmpeg 终于推出了wasm版本
feng.han
博客等级 码龄11年 62粉丝 6原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值