Turbo-rails保留上页CSS问题：是否正常及如何规避？

1. 这是预期行为吗？ #

是的，这是Turbo Rails的预期行为。Turbo的核心设计是通过部分页面替换提升加载速度，默认会合并新旧页面的<head>内容：重复元素会复用，不同元素则追加到<head>中。因此从Tailwind页面跳转至Bootstrap页面时，两个CSS链接会被同时保留，进而引发样式冲突。

2. 如何阻止Turbo保留上一页的CSS链接？ #

根据场景不同，有以下几种可行方案：

方式一：使用data-turbo-track="reload"属性 #

在CSS的<link>标签上添加该属性，Turbo会识别不同的CSS资源，自动替换旧链接而非追加。修改后的页面头部代码如下：
Tailwind页面：

<head>
   <link rel="stylesheet" href="tailwind.css" data-turbo-track="reload">
</head>

Bootstrap页面：

<head>
   <link rel="stylesheet" href="bootstrap.css" data-turbo-track="reload">
</head>

导航到新页面时，Turbo会检测到新旧CSS文件的差异，自动移除旧的<link>标签，仅保留当前页面的CSS。

方式二：禁用特定导航的Turbo功能 #

若部分页面无需Turbo的部分加载特性，可通过强制全页面刷新来避免样式残留：

• 在跳转链接上添加属性：

<a href="/bootstrap-page" data-turbo="false">前往Bootstrap页面</a>

• 或在目标页面的<head>中添加meta标签：

<meta name="turbo-visit-control" content="reload">

这种方式会触发完整页面刷新，<head>内容会被完全替换，不会保留之前的CSS链接。

方式三：自定义Turbo事件清理CSS #

监听Turbo的turbo:before-render事件，在新页面渲染前手动移除所有旧CSS链接：

document.addEventListener('turbo:before-render', (event) => {
  document.querySelectorAll('link[rel="stylesheet"]').forEach(link => link.remove());
});

该方式较为激进，会清空所有已加载的CSS，适合需要完全重置样式的场景。

内容的提问来源于stack exchange，提问作者Evgenii