Everything looks good and works fine in my react app dev build, but some css styles aren't being correctly applied to the production build i host on my github pages through gh-pages npm package (through this guide https://github.com/gitname/react-gh-pages)
在我的Reaction应用程序开发版本中,一切看起来都很好,工作正常,但一些css样式没有正确应用到我通过gh-ages npm包(通过本指南https://github.com/gitname/react-gh-pages))托管在GitHub页面上的生产版本
this is my hosted app: https://arthwr.github.io/little-lemon-app/
这是我的托管应用程序:https://arthwr.github.io/little-lemon-app/
The problem with mobile version hamburger button.
It works like this: it applies .openMenu class to 2 elements (parent div and nav element) to apply some css styles. However menu that is supposed to be hidden on left , is seen and by the look of dev tools css styles for default behaviour aren't being loaded correctly or not switching for some reason. Class is added and changed correctly though. I attached 2 screenshots so its seen how i want it to look like and how it looks and works correctly on my dev version.
I also attached CSS snapshot for the elements that have this problem :
手机版汉堡包按钮的问题。它的工作原理是这样的:它将.OpenMenu类应用于2个元素(父div和NAV元素),以应用一些CSS样式。然而,菜单本应隐藏在左侧,但从开发工具的外观来看,默认行为的css样式没有正确加载,或者由于某种原因没有切换。不过,类已正确添加和更改。我附上了2个屏幕截图,所以它看到了我希望它是什么样子,以及它的外观和工作方式在我的开发版本正确。我还附上了有此问题的元素的CSS快照:
.navContainer
.navContainer.openMenu
.nav
.nav.openMenu
[Styles for nav menu](https://i.stack.imgur.com/zD1dt.png)
[How it looks in deploy build (incorrect)](https://i.stack.imgur.com/XEbuS.png)
[Devbuild correct state (inactive)](https://i.stack.imgur.com/vK8YR.png)
[Devbuild correct state (active)](https://i.stack.imgur.com/4Mflc.png)
UPDATE:
最新情况:
after i looked through minified version of css i found out that somehow deploy build is concatinating css classes into 1, but ignoring styles for default and not loading them (without openMenu class) :
在我查看了简化的CSS版本后,我发现Deploy Build不知何故将CSS类连接到1中,但忽略了默认样式,并且不加载它们(没有OpenMenu类):
.Nav_navContainerGhavJ,
.Nav_navContainerGhavJ.Nav_openMenuL+8i0,
.Nav_navp72ig,
.Nav_navp72ig.Nav_openMenuL+8i0 {
@media screen and (max-width: 852px) {
left: 0;
opacity: 1;
position: absolute;
}
}
so i see the problem but i don't know how to solve this. I also tried to change class names but it didn't help
所以我看到了问题,但我不知道如何解决这个问题。我还试图更改类名,但无济于事
更多回答
I see that your browserslist
has different settings for prod-env and dev-env. Have you tried to set prod settings for dev environment? The link: github.com/Arthwr/little-lemon-app/blob/main/package.json
我看到您的浏览器列表对prod-env和dev-env有不同的设置。您是否尝试为开发环境设置Prod设置?链接:github.com/Arthwr/little-lemon-app/blob/main/package.json
@Eugene Hi! Thank you for responding! I tried to your suggestion and changed browserlist
settings of dev environment to be the same as production settings. However there were no noticable changes in dev build (i only checked the issue with menu). Everything worked fine in dev build as before and i assume nothing should change in prod as well (still not working correctly).
@尤金嗨!感谢您的回复!我尝试了您的建议,并将开发环境的浏览器列表设置更改为与生产设置相同。然而,在dev版本中没有明显的变化(我只用菜单检查了这个问题)。在dev构建中一切都像以前一样工作得很好,我认为在prod中也不应该有任何变化(仍然不能正常工作)。
我是一名优秀的程序员,十分优秀!