uniapp 打包为APP scss 层级嵌套不生效

问题:uniapp 在APP中scss使用层级嵌套失效

同事开发uniapp的时候,突然碰到一个诡异的bug,别的项目正在使用的方案,vue+scss,突然在这个项目不好使,打包出来的APP,层级嵌套怎么都不生效,只剩最外层的样式,把所有层级扁平化,就可以使用。但是在小程序 和h5页面,显示是正常的

排查:

猜测1:怀疑是vue+nvue项目混合导致

因为nvue对css的支持不那么全,并且也同样不支持scss嵌套。但是我这边对于nvue并不怎么熟悉,所以采用了最简单粗暴的方式,clone项目之后,将nvue页面全部删除,然后运行,问题依旧

猜测2:怀疑是全局样式引入问题

这个项目是三端通用,最开始开发是h5,看了下全局样式是在main.js通过这种方式引入的

js 复制代码
import "@/common/styles/global.less"

实际在编译到APP会出现全局样式失效,但是实际排查下来并非但是全局样式出问题,单页面的样式也失效了。只要是层级嵌套就有问题。所以这个也排除了。

真相:引入方式错误

经过了1个多小时的排查,我新建了一个vue2项目,把页面拷过去的时候,发现了问题,他引入scss的方式,有区别,我们项目的规范,过长的css要单独新建一个文件,通过@import的方式引入,问题也就出在这里

js 复制代码
<style lang="scss" scoped>
// 错误
@import url(./index.scss);
// 正确
@import './index.scss';
<style>

多了一个url()的区别,让我们排查了将近2小时。但是为什么两种写法会有差异,还不清楚。只是排查除了问题所在。

相关推荐
小羊没烦恼!2 小时前
T-SQL查询高级—SQL Server索引中的碎片和填充因子
开发语言·前端·javascript·数据库·后端·python·web安全
定栓2 小时前
Webpack迁到Vite第一节:模块系统迁移:require → import
运维·前端·webpack
小熊在忙fpga2 小时前
N32G430芯片的flash表示
前端·javascript·html
Data analyse4562 小时前
App埋点版本兼容的字段迁移校验
大数据·运维·服务器·前端·数据库·数据分析
todoitbo2 小时前
本来只想给内网开个口子,Natapp 却多给了一道防护
前端·javascript·vue.js·内网穿透·网络防护·natapp
会灭火的程序员3 小时前
SuperMap AgentX Server智能体接入WEB应用技术文档
前端·supermap·agentx·agentx server
CRMEB3 小时前
商品 SKU 设计,从简单规格到多规格踩过什么
java·前端·数据库·开源
Chloe.Zz3 小时前
一篇入门Agent
开发语言·前端·javascript
java1234_小锋3 小时前
【技术专题】HTML5 网页技术 - HTML5 表格标签
前端·html·html5
雪芽蓝域zzs3 小时前
JS 项目转 TS 项目(Vue3 + 若依这类后台项目)完整改造清单
前端·vue.js