如何在Nuxt应用中用import语法动态切换highlight.js主题？

针对你遇到的首次切换主题有效、切回旧主题时样式不生效的问题，核心原因是动态导入的CSS会在页面中累积，旧主题的<style>标签未被移除，导致样式优先级冲突。以下是无需Sass、无需刷新页面的解决方案：

步骤1：添加状态记录已加载的样式标签 #

在组件的data中新增变量，用于存储当前生效的Highlight.js主题样式标签：

data() {
  return {
    loadedThemeStyle: null // 保存当前主题的style标签
  }
}

步骤2：修改asyncImport方法，移除旧样式再加载新主题 #

更新asyncImport方法，在加载新主题前先移除之前的样式标签，确保页面中只有当前主题的CSS生效：

asyncImport: async function () {
  const themeMap = {
    default: "github",
    kind1: "idea",
    kind2: "tomorrow-night-bright",
    kind3: "default"
  }
  const targetTheme = themeMap[this.themeNameActive]

  // 移除之前加载的主题样式标签
  if (this.loadedThemeStyle) {
    this.loadedThemeStyle.remove()
    this.loadedThemeStyle = null
  }

  // 动态导入目标主题的CSS
  await import(`highlight.js/styles/${targetTheme}.css`)

  // 获取刚插入的style标签（动态导入的CSS会插入到head的最后）
  const allStyleTags = document.querySelectorAll('style')
  this.loadedThemeStyle = allStyleTags[allStyleTags.length - 1]

  // 重新高亮所有代码块
  hljs.highlightAll()
}

原理说明 #

• 动态导入ES模块形式的CSS时，浏览器会自动在<head>中插入对应的<style>标签，且重复导入同一CSS文件不会重复插入标签。
• 切换主题时先移除旧样式标签，再加载新主题，就能避免旧样式覆盖新样式的问题。

可选优化：添加防抖避免频繁切换触发多次导入 #

如果用户可能快速切换主题，可给watch添加防抖，减少不必要的请求和DOM操作：

watch: {
  themeNameActive: {
    handler: function () {
      this.asyncImport()
    },
    immediate: true, // 页面初始化时自动执行一次
    debounce: 300 // 300ms内多次切换只执行最后一次
  }
}

内容的提问来源于stack exchange，提问作者hamid-davodi