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

Posted 2023-02-22

【中文标题】是否可以将 css 注入 Vue 组件样式部分？

【英文标题】：Is it possible to inject css into Vue component style section?

【发布时间】：2018-12-25 16:41:20

【问题描述】：

我正在尝试做的一个例子

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

    export default 
      data: () => (
        aModelWithStyle: name: "Hansel", css:".pcolor:red"
      )  
    
    </script>

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

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

【问题讨论】：

通常反之亦然。您在样式部分定义 css 并在组件中引用它。从组件到样式的 css 用例是什么？

是的，我了解它通常是如何完成的。用例是一个模型对象，包含它自己的样式信息。所以，如果我加载一个跑道模型模型，每个显示的跑道模型都会加载它自己的 css。

afaik 这是不可能的。检查这个github.com/vuejs/vue/issues/4879 有一些像该票中描述的黑客，例如像***.com/questions/47322875/… 这样的东西

感谢这些链接！哦，好吧，硬核并将风格注入 dom

【参考方案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