各位刚入门IT的小伙伴们，大家好～ 我是一名正在自学前端的大学生，今天想跟大家分享一次我踩过的技术坑，既是给自己复盘，也希望能帮大家少走点弯路。

雷军说过：“失败本身并不可怕，正视内心的恐惧，才是关键。” 这句话我一直记在心里，尤其是学IT的这些日子，每天都在和bug打交道，有时候一个小问题能卡一下午，那种挫败感真的会让人想放弃，但每次解决完，又会觉得特别有成就感——这大概就是IT学习的魅力吧，痛并快乐着。

事情是这样的，昨天下午，我像往常一样，在HBuilderX里写完uniapp项目，准备编译发行成微信小程序，做最后的调试。之前也做过好几次同样的操作，流程早就烂熟于心。

可万万没想到，这次点击编译后，没有像往常一样顺利加载，反而页面直接爆红，控制台弹出了一串报错提示：

[ WXSS 文件编译错误] ./common/main.wxss(231:145631): unexpected `{` at pos 200376(env: Windows,mp,2.01.2510280; lib: 3.14.2)

当时我第一反应就是懵了——我明明没有修改过css相关的核心代码，只是新增了几个简单的样式，而且写的时候特意核对过，括号、分号、选择器名称都没写错，语法上完全没问题啊？

为了确认，我反复检查了报错指向的那几行css代码，甚至把新增的样式全部注释掉，只保留之前能正常编译的代码，再重新编译——结果还是一样，依旧爆红，报错提示没变，还是指向css区。

这时候我赶紧打开浏览器，搜“uniapp编译微信小程序 css报错”，出来了一大堆解决方案，我一个个挨着试。

先是看到有人说“重启HBuilderX就能解决”，我立刻关掉软件，重新打开，编译——还是报错；然后又看到“清理微信开发者工具缓存，重启模拟器”，我跟着操作，清空缓存、关闭模拟器、重新启动，再编译——依旧爆红；还有人说“检查uniapp版本，版本不兼容会导致报错”，我核对了一下，我的HBuilderX是最新版本，uniapp插件也没有缺失；甚至还有人说“重新导入项目、检查文件路径”，这些方法我都一一试了个遍，折腾了快两个小时，控制台的报错还是没有消失。

说实话，那时候我真的有点泄气了，我继续翻找技术文章，终于在一篇CSDN博客上看到了一句话，瞬间点醒了我：uniapp编译微信小程序时，默认不支持CSS原生嵌套写法，即使语法无错，也会出现编译报错，改为标准CSS选择器写法即可解决。

我赶紧回去检查自己的css代码，果然！我之前写样式的时候，习惯了用Web端的CSS嵌套写法，比如给导航栏的子元素写样式，我是这么写的：

.nav {  width: 100%;  height: 44px;  display: flex;  /* 嵌套写法，导致编译报错 */  .nav-item {    flex: 1;    text-align: center;    line-height: 44px;  }}


后来我查了uniapp官方文档才知道，uniapp的CSS虽然和Web端的CSS基本一致，支持less、scss等预处理器，但默认不识别CSS原生嵌套写法


参考来源：uniapp官网《页面样式与布局》

https://uniapp.dcloud.net.cn/tutorial/syntax-css.html

我们平时在Web端写的嵌套样式，其实是需要预处理器编译后才能生效的，而我没有配置scss预处理器，直接用了嵌套写法，uniapp编译微信小程序时无法识别，就出现了报错。
找到问题根源后，解决起来就很简单了。我按照文章里说的，把嵌套写法改成了标准的CSS后代选择器写法，修改后的代码是这样的：
.nav {  width: 100%;  height: 44px;  display: flex;}/* 标准CSS选择器写法，无嵌套 */.nav .nav-item {  flex: 1;  text-align: center;  line-height: 44px;}


修改完成后，我再次点击编译，这一次，没有爆红，小程序模拟器顺利加载完成，所有样式都正常显示，那一刻，我真的太激动了——折腾了一下午的bug，竟然就这么解决了！
在这里，我想跟各位初入IT的小伙伴们，认真分享几个我从这次踩坑中得到的反思，也算是一点技术心得：
第一，框架有框架的规范，不要想当然地套用自己习惯的写法。我们初入IT，很容易把Web端的开发习惯，直接套用在其他框架上，比如我这次，以为CSS嵌套写法在哪里都能用，却忽略了uniapp的框架特性。其实很多bug，都不是因为我们技术不行，而是因为我们没有吃透框架的规则——就像雷军说的，“复盘就是回答三个问题：做对了什么？做错了什么？重来一遍该怎么做？” 每次踩坑后，多复盘框架的特性，才能避免下次再犯同样的错误。
第二，排查bug时，不要盲目试网上的解决方案，要学会精准定位问题。我这次一开始，看到网上的方法就乱试，没有先仔细分析报错提示，也没有定位问题的核心，导致浪费了大量时间。其实报错提示已经明确告诉我们“报错在css区”，我们就应该聚焦css相关的问题，比如样式写法、框架对css的支持情况，而不是盲目重启软件、清理缓存。初入IT，学会排查bug的思路，比单纯解决一个bug更重要。
第三，基础真的很重要，标准写法永远是最稳妥的选择。CSS嵌套虽然写起来方便，但它并不是CSS的标准写法，而是预处理器的扩展特性。我们作为新手，先把标准的CSS选择器写法练熟练透，再去学习嵌套、预处理器等进阶用法，才能稳步提升。很多时候，最简单、最标准的写法，反而能避免很多不必要的bug。
第四，不要害怕踩坑，每一个坑都是我们成长的勋章。学IT的路上，没有谁是一帆风顺的，哪怕是资深的程序员，也会遇到各种各样的bug。就像我这次踩的这个CSS嵌套的坑，虽然浪费了一下午的时间，但也让我记住了uniapp编译微信小程序的一个重要特性，也学会了更高效的bug排查思路——这些收获，比顺利完成项目本身更有价值。
最后，想跟大家说一句：作为初入IT的学习者，我们不必急于求成，也不必因为遇到bug就自我否定。雷军50多岁还能跨行造车，我们年轻人，有什么理由不坚持下去？“只要持续努力，不断成长，每个人都有机会‘逆天改命’”。
如果你们也在学习uniapp、开发微信小程序，或者也踩过类似的CSS坑，欢迎在评论区留言分享，我们一起交流、一起避坑、一起成长～ 后续我也会持续分享自己的学习心得和踩坑经历，记得关注我哦！

参考来源：
1. uniapp官网《页面样式与布局》；
2. CSDN博客《uni-app笔记整理三》；
3. 雷军2025年度演讲金句。