Nuxt动态注入自定义CSS：解决生产环境样式标签丢失问题

这个问题我之前帮同行处理过，核心原因是Nuxt在生产构建时的代码优化机制会移除嵌套在<template>内的<style>标签——毕竟Vue单文件组件的规范里，<style>应该放在组件的顶层（和<template>、<script>同级），模板里的<style>属于非标准写法，开发模式下没做严格校验所以能运行，但生产打包时会被清理掉。

给你几个经过验证的解决方案：

方案1：用Nuxt的head()方法注入内联样式（推荐） #

这是Nuxt官方推荐的头部资源注入方式，不管开发还是生产环境都会正确处理样式，而且能保证样式在页面渲染前就被加载。

<template>
  <div class="container">
    <div class="wordvue mt-5" v-html="content.rendered"></div>
  </div>
</template>

<script>
export default {
  // 假设你在这里获取WordPress API数据
  async asyncData({ $axios }) {
    const res = await $axios.get('/your-wordpress-content-endpoint');
    return { content: res.data };
  },
  // 通过head方法注入自定义CSS
  head() {
    return {
      style: [
        {
          cssText: this.content?.custom_css || '',
          type: 'text/css'
        }
      ]
    };
  }
};
</script>

如果是Nuxt 3项目，改用组合式API的useHead：

<template>
  <div class="container">
    <div class="wordvue mt-5" v-html="content.rendered"></div>
  </div>
</template>

<script setup>
// 获取WordPress数据
const { data: content } = await useFetch('/your-wordpress-content-endpoint');

// 注入自定义CSS
useHead({
  style: [
    {
      cssText: content.value?.custom_css || '',
      type: 'text/css'
    }
  ]
});
</script>

方案2：运行时动态创建<style>元素 #

如果需要样式只作用于当前组件的生命周期，可以在组件挂载时动态创建样式标签并插入到页面头部，这种方式完全绕开Nuxt的编译优化，不会被移除。

<template>
  <div class="container">
    <div class="wordvue mt-5" v-html="content.rendered"></div>
  </div>
</template>

<script>
export default {
  async asyncData({ $axios }) {
    const res = await $axios.get('/your-wordpress-content-endpoint');
    return { content: res.data };
  },
  mounted() {
    // 仅当存在自定义CSS时才创建元素
    if (this.content?.custom_css) {
      const styleEl = document.createElement('style');
      styleEl.textContent = this.content.custom_css;
      document.head.appendChild(styleEl);

      // 组件销毁时移除样式标签，避免内存泄漏
      this.$once('hook:beforeDestroy', () => {
        document.head.removeChild(styleEl);
      });
    }
  }
};
</script>

为什么原写法不行？ #

Vue单文件组件（SFC）的规范要求<style>必须是组件的顶层节点，和<template>、<script>同级。Nuxt在生产构建时会对SFC做严格的编译优化，嵌套在<template>里的<style>会被识别为无效标签，进而被清理掉；而开发模式下编译器的校验更宽松，所以能暂时正常运行。

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