Vue组件自定义CSS修改不触发热重载，如何解决？

核心问题是Vue的热重载机制默认监听组件的template、script、style文件变更，而自定义CSS变量不属于Vue的响应式依赖，直接修改它无法触发组件的响应式更新和热重载。以下是几种可行的实现方法：

方法1：将CSS变量绑定到Vue响应式数据 #

把--content-width和Vue的响应式变量绑定，让Vue感知到变量变化，从而自动更新DOM并触发热重载。示例代码如下：

<template>
  <nav class="custom-nav">
    <div class="left-content">左内容</div>
    <div class="right-content">右内容</div>
  </nav>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'

// 定义响应式变量，初始化时读取全局CSS变量的值
const contentWidth = ref('')

onMounted(() => {
  const root = document.documentElement
  contentWidth.value = getComputedStyle(root).getPropertyValue('--content-width').trim() || '1200px'
})

// 监听响应式变量变化，同步到全局CSS变量
watch(contentWidth, (newVal) => {
  const root = document.documentElement
  root.style.setProperty('--content-width', newVal)
})
</script>

<style scoped>
.custom-nav {
  max-width: var(--content-width);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
</style>

无论你是在代码中修改contentWidth的值，还是通过Vue DevTools调整该变量，都会触发组件的响应式更新，热重载也会正常工作。如果是全局CSS文件中定义的--content-width，可以在组件初始化时读取它的值，后续通过响应式变量控制。

方法2：手动监听CSS文件变更触发热重载 #

如果--content-width定义在全局CSS文件中，你可以利用Vue的热重载API手动监听该文件的变更，强制组件更新：

<script setup>
import { getCurrentInstance } from 'vue'

const instance = getCurrentInstance()

if (import.meta.hot) {
  // 替换为你的全局CSS文件路径
  import.meta.hot.accept('/src/styles/global.css', () => {
    // 强制组件更新
    instance.proxy.$forceUpdate()
  })
}
</script>

当全局CSS文件修改后，热重载会触发回调，调用$forceUpdate()让组件重新渲染，从而读取最新的CSS变量值。

方法3：用MutationObserver监听CSS变量变化 #

如果需要捕获外部脚本或工具修改--content-width的情况，可以使用MutationObserver监听根元素的style属性变化，触发组件更新：

<script setup>
import { onMounted, onUnmounted, getCurrentInstance } from 'vue'

let observer = null
const root = document.documentElement
const instance = getCurrentInstance()
let prevWidth = ''

onMounted(() => {
  prevWidth = getComputedStyle(root).getPropertyValue('--content-width').trim()
  
  observer = new MutationObserver(() => {
    const currentWidth = getComputedStyle(root).getPropertyValue('--content-width').trim()
    if (currentWidth !== prevWidth) {
      prevWidth = currentWidth
      instance.proxy.$forceUpdate()
    }
  })

  // 监听根元素的style属性变化
  observer.observe(root, { attributes: true, attributeFilter: ['style'] })
})

onUnmounted(() => {
  if (observer) observer.disconnect()
})
</script>

这个方法可以捕获内联修改CSS变量的情况，但如果是外部CSS文件修改，MutationObserver无法直接感知，此时需要结合方法2一起使用。

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