最近在写业务的时候测试突然跑来告诉我后台有个bug,页面不能滚动，这个BUG 只出现在测试和生产环境中（项目打包过后），所以我开发的时候完全就没有任何问题。。。

tip：我这里已经在知道原因的情况下选择直接用开发模式复现bug

容器时2000px 的高度，但是没有滚动条。样式取消了也没有出现滚动条。（其实这个地方我出现了问题，不应该只看 '.app-main'容器的样式，父级的样式也得看,我一开始只是往下翻了一下，所以不确定是样式出现了问题） 由于只出现在生产环境中（项目打包过后），所以一开始是想从打包配置这方面入手的，无奈找不到原因，所以不知道从何下手。

这个项目用的是公司模板代码（空架子）是我自己亲手改出来的，所以有什么功能都一清二楚。出现问题的项目是第二个项目。

在第一个项目之后的摸鱼过程中，这个架子又加了其他功能和组件。所以我只能一点儿一点儿的删除main.js引入的样式文件。最后我发现没什么卵用。这个时候真的很头大。质询各方大佬过后一致建议把内容一点儿点儿的删除测试，好在黄天不负有心人。最后找到了出现问题的地方。

这是有问题组件的样式部分

这个组件是忘了从哪cv 过来的，反正开发的时候没毛病的

最后是定位了这个不能滚动的原因是这个地方（也是我在看样式的时候没有往父元素看）的问题。 最关键这个组件在目前的业务里边儿完全没有用到 因为菜单权限用的是动态路由做的，在路由里也没有用这个页面。一开始以为会被tree shaking 掉。所以误导了我找bug 的思路

## 解决问题

找到了body 标签被加上overflow 的地方

在加上scoped 后打包上测试环境ok ！ 到这就结束了吗？ 不可能的吧。

虽然问题是解决了，但是为什么会出现这个问题还是很困扰 我这个菜鸟的。 不服就干！ 还是想尝试找到问题的原因。

在测试环境下我发现这个组件虽然是路由懒加载的方式。但是从body 的样式和souseMap 中可以找到 样式还是被打包进去了。

所以目前只需要让这个文件的css 不打包到全部的css 里就好了。这也是我开始的想法，只是大概的方向。我先是从vue-loader源码开始翻（源码也就是看看函数名字有没有大概能对上的），到webpack 配置项,到css-loader配置项都没找到想要的。最后来到了vue-cli 平常这东西不怎么玩。不懂，随便翻了翻，然后就困的睡着了。。。。 等我醒来后想着找不到问题就算了的想法往下点了些没看完的资料。

在这里看到了敏感信息。。。 这个时候我也感觉好像要成功了 拿着关键字在文档里边儿搜索

描述的信息基本上能与我的bug 问题出现的时机差不多。又是跟样式相关的东西。果断就拿到准备开始调试

经过配置后，成功在开发环境复现的这个bug 。 到这里成就感就冒上来了。。。。。

很开心把自己挖的坑给填上了。想着这个问题一定值得我记录，所以就有了这篇文章。

感谢大家的阅读，谢谢！！