Javascript 如何在Nuxt中动态注入样式？

在使用WordPress构建Nuxt应用程序时，我从WordPress API导入自定义css

如何将自定义CSS注入模板

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

{{content.custom_css}}

我的问题是，这在开发模式下工作，但是样式标记在生产模式下被删除

有什么解决方法吗？

编译时会自动剥离标记。幸运的是，通过使用Vue的

.foo[data id=“{{uniqueId}}”]{
颜色：{{color}}；
}
.foo[data id=“{uniqueId}}”].bar{
文本对齐：{{align}
}
导出默认值{
道具：{
身份证：{
类型：字符串，
默认值：null
}
},
计算：{
唯一的{
//注意：这个。虽然uid不被认为是SSR安全的，所以您
//可能需要使用其他ID/UUID生成器
//在服务器端和客户端生成相同的ID。或者
//确保始终为'ID'道具提供唯一的ID
返回this.id | | this._uid；
},
颜色（）{
返回条件“红色”：“000”；
},
align（）{
返回someCondition？'left'：'right'；
}
}
}

查看更多信息

<template>
  <div>
    <component is="style">
      .foo[data-id="{{ uniqueId }}"] {
        color: {{ color }};
      }
      .foo[data-id="{{ uniqueId }}"] .bar {
        text-align: {{ align }}
      }
    </component>
    <div class="foo" :id="id" :data-id="uniqueId">
      <div class="bar">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    id: {
      type: String,
      default: null
    }
  },
  computed: {
    uniqueId() {
      // Note: this._uid is not considered SSR safe though, so you
      // may want to use some other ID/UUID generator that will
      // generate the same ID server side and client side. Or just
      // ensure you always provide a unique ID to the `id` prop
      return this.id || this._uid;
    },
    color() {
      return someCondition ? 'red' : '#000';
    },
    align() {
      return someCondition ? 'left' : 'right';
    }
  }
}
</script>