有关 CSS 网站变黑白是如何做到实时的？

[CSGO]

我也试着把网页变黑白，结果发现自己刷新是不会变黑白，可能需要把浏览器缓存都删除才可以。
那例如很多网站的黑白，为啥就可以在我访问的时候被“强制”用上了新的 css ？

是和用的 cf 的 ttl 缓存时间有关系吗？这个缓存时间表示比如设置 1 天，cf 就会每天都会重新下载一遍我服务器上的文件？

[Mosugar]

Google 一下 大把源码

[ztxcccc]

css 文件名里有 hash 标识
html 被更新以后访问的 css 文件从类似于 index.123.css 变成了 index.456.css ，强制你去获取新文件

[Kenmin]

二楼正解

[CSGO]

@ztxcccc
@Kenmin 我应该搜索什么可以获取相关知识？找了 css hash 没看到相关内容。

[Kenmin]

@CSGO 一般是通过 Webpack 打包自动生成的，这里有相关配置文档 https://webpack.js.org/guides/caching/

[chniccs]

@CSGO #4 网页黑白

[christin]

你是用什么打包工具打的呢？ webpack 和 vute 配置的地方不一样

[CSGO]

懂了，我纯静态。

[Doraismydora]

可以在 css 引用后头加上?timestamp=
这个是很久之前我学前端的时候看到的方法

[daozun]

如果使用 nginx 的话，可以加上
expires 0;
add_header Cache-Control no-cache;
强制更新

[ie88]

看起来楼主不太懂 web 前端，你查看页面源码，看看 css 文件的后缀就知道了，通常用 webpack 和 vite 打包出来的 js css 文件是带 hash 的

[tool2d]

@daozun 强制更新也只能等上一次 css 资源过期后才生效，要不然连客户端查询请求都不会发起。

一般来说，都是 html 可以设置 no-cache, 而 js/css 都是需要一定缓存的。

[ie88]

@ie88 文件名不同，因此浏览器没有缓存，所以服务器返回新的 css js 文件，页面就重新渲染了