是否可以将 css 注入 Vue 组件样式部分？答案

【问题标题】：Is it possible to inject css into Vue component style section?是否可以将 css 注入 Vue 组件样式部分？
【发布时间】：2018-12-25 16:41:20
【问题描述】：

我正在尝试做的一个例子

  <template>
      <div>
        <p>I pee red!</p>
      </div>
    </template>
    <script>

    export default {
      data: () => ({
        aModelWithStyle: {name: "Hansel", css:".p{color:red}"}
      })  
    }
    </script>

    <style scoped lang="scss">
      {{aModelWithStyle.css}}
    </style>

显然样式标签中的 {{aModelWithStyle.css}} 不起作用。我将如何使用 Vue 完成此任务？

【问题讨论】：

通常反之亦然。您在样式部分定义 css 并在组件中引用它。从组件到样式的 css 用例是什么？
是的，我了解它通常是如何完成的。用例是一个模型对象，包含它自己的样式信息。所以，如果我加载一个跑道模型模型，每个显示的跑道模型都会加载它自己的 css。
afaik 这是不可能的。检查这个github.com/vuejs/vue/issues/4879 有一些像该票中描述的黑客，例如像stackoverflow.com/questions/47322875/… 这样的东西
感谢这些链接！哦，好吧，硬核并将风格注入 dom

标签： css vue.js vue-component

【解决方案1】：

vue文档说可以使用

<style src="./my-component.css"></style>

我不确定这是否正是您要寻找的，但这是我的最佳猜测。

【讨论】：

【解决方案2】：

“您不能在运行时通过组件的 JavaScript 动态更改样式 - 不。”

https://forum.vuejs.org/t/is-it-possible-to-inject-css-into-vue-component-style-section/38813/3?u=three60

【讨论】：