Remix应用修改TSX后HMR导致SCSS模块样式丢失？

问题原因 #

你同时用两种方式处理了同一个CSS Modules文件，导致热重载时样式资源冲突：

• 在_index.tsx中直接导入global.module.scss，Vite会将样式注入客户端；
• 又在root.tsx中用?url语法导入同一个文件，生成了静态资源链接但未通过规范方式添加到页面。
  初始加载时两种方式的样式都能生效，但HMR触发后，组件的动态样式注入被异常覆盖，最终导致样式丢失。

解决方案 #

方案1：移除冗余导入，仅保留组件内CSS Modules导入 #

直接删除root.tsx中的以下代码：

import globalStyles from "~/styles/global.module.scss?url";

保持_index.tsx中的导入不变，Vite会自动处理CSS Modules的热重载逻辑。

方案2：使用Remix LinksFunction统一管理样式（推荐） #

修改_index.tsx，添加LinksFunction注册样式表，这更符合Remix的资源管理规范：

import type { LinksFunction } from "@remix-run/node";
import classes from "../styles/global.module.scss";

// 注册样式表链接
export const links: LinksFunction = () => [
  { rel: "stylesheet", href: classes },
];

export default function Index() {
  return <h1 className={classes["test"]}>Welcome to Remix</h1>;
}

同时删除root.tsx中对global.module.scss?url的导入，页面会通过<Links />组件自动收集并加载组件注册的样式。

补充说明 #

Remix Vite中CSS Modules支持两种使用方式：

• 直接导入：样式会被Vite注入客户端，适合小型组件样式；
• 通过LinksFunction注册：样式会作为独立样式表加载，更符合Remix服务端渲染的资源管理逻辑。
  不要同时用两种方式处理同一个样式文件，否则会引发HMR时的资源不一致问题。

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