对于代码相同的网站,开发环境和生产环境之间显示不同的CSS



对于我制作的以下网站:ifrs.site(具有自定义主题的WordPress网站,如果这很重要的话(,当浏览器窗口在桌面上没有最大化时,或者在移动设备上查看时,页脚处的内容会重叠。我在开发环境中修复了这个重叠问题,但与开发网站具有相同CSS代码的实时网站最终会出现更严重的重叠。

差异的原因是什么?您可以在这个github repo中看到代码的差异:https://github.com/keg504/IFRS-Website-theme-files,在2个分支中的dev文件和master。master上的内容就是当前网站上使用的内容。

我在Windows10上的开发环境中使用了Localby飞轮,CSS在nodejs上使用webpack配置运行。

编辑:根据Aliqua的请求,我添加了我正在调用的wp_enque_style函数来加载CSS:wp_enqueue_style('our-main-styles', get_theme_file_uri('/bundled-assets/styles.ba56d060f11656536bc3.css'));

样式之间的部分。。。每当在命令行中运行npm运行构建时,css都会更改

根据您的设计/设置,css可能在源代码中附加了?ver=1.0.0或类似内容。这意味着,如果您进行了更改,但没有更新版本,它仍然会从缓存中调用原始文件。

一些开发人员通过将数组的enqueue_script()版本部分设置为date()(包括时-分-秒(函数来克服这一问题。这意味着每次刷新页面时,版本都不同,并且不会从缓存中调用旧版本的css。

在代码中搜索有问题的css的入队脚本行,看看是否可以将date((设置为版本值。

请参阅https://www.php.net/manual/en/function.date.php了解更多信息。

更新:根据你的更新,你可以用这样的东西来代替它。

wp_enqueue_style( 'our-main-styles',
get_theme_file_uri('/bundled-assets/styles.ba56d060f11656536bc3.css'),
array( $parent_style ), // remove if there is no parent style
date("His")
);

参考wp_enque_style-https://developer.wordpress.org/reference/functions/wp_enqueue_style/

最后的想法:请注意,这个答案实际上可能不是我试图确定你的问题的实际解决方案。请参阅https://developer.wordpress.org/熟悉有关wordpress发展的介绍信息。如果你想对wordpress CMS做更多的更改,你需要对如何进行更改有一个基本的了解。请将您的一些研究重点放在插件创建、儿童主题以及如何制作自己的自定义函数上。然后你将能够写出更好的问题,并能够在未来对答案采取行动。

祝你发展顺利。

最新更新