Vanilla TS Vite项目生产环境CSS link ID丢失，无法切换样式求助

方案1：配置Vite保留link标签的ID #

Vite生产构建时的HTML压缩逻辑可能会移除它判定为“无作用”的ID属性，可通过修改配置强制保留：

在vite.config.ts中添加以下配置：

import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    html: {
      minify: {
        keepAttributes: true, // 强制保留所有元素属性，包括ID
        minifyCSS: true,
        minifyJS: true,
      },
    },
  },
});

配置后Vite会保留link标签的ID属性，你可以继续用原有的getElementById逻辑切换样式。

方案2：动态创建link标签（推荐） #

放弃HTML静态引入样式，改为在TypeScript中动态生成link标签，完全掌控标签的ID与状态：

// 封装样式管理工具
const styleManager = {
  createStyleLink(id: string, href: string): HTMLLinkElement {
    const link = document.createElement('link');
    link.id = id;
    link.rel = 'stylesheet';
    link.href = new URL(href, import.meta.url).href; // 确保路径适配Vite构建规则
    document.head.appendChild(link);
    return link;
  },
  toggleStyle(id: string, enable: boolean) {
    const link = document.getElementById(id) as HTMLLinkElement;
    if (link) link.disabled = !enable;
  },
};

// 初始化创建两个样式链接
styleManager.createStyleLink('css_login', './styles/login.css');
styleManager.createStyleLink('css_lobby', './styles/lobby.css');

// 样式切换示例
styleManager.toggleStyle('css_login', false); // 禁用登录页样式
styleManager.toggleStyle('css_lobby', true); // 启用大厅页样式

这种方式完全避开Vite对静态HTML的处理，ID不会丢失，且样式加载逻辑更灵活。

方案3：用自定义data属性替代ID #

如果不想修改Vite配置，可给link标签添加自定义data属性（Vite默认不会移除自定义data属性）：

修改HTML中的link标签：

<link rel="stylesheet" href="./styles/login.css" data-css="login">
<link rel="stylesheet" href="./styles/lobby.css" data-css="lobby">

在TypeScript中通过data属性选中元素切换样式：

// 禁用登录样式
const loginLink = document.querySelector('link[data-css="login"]') as HTMLLinkElement;
loginLink.disabled = true;

// 启用大厅样式
const lobbyLink = document.querySelector('link[data-css="lobby"]') as HTMLLinkElement;
lobbyLink.disabled = false;

该方案无需改动配置，快速解决问题。

内容的提问来源于stack exchange，提问作者Thomas G.