javascript - 如何在注册该组件时为 vue.js 组件定义 css 样式？

Question

我可以注册一个自定义的 vue.js 组件

// register
Vue.component('my-component', {
  template: '<div class="my-class">A custom component!</div>'
})   

另见 https://v2.vuejs.org/v2/guide/components.html

如何为我的组件包含 css 类？

我希望是这样的

 Vue.component('my-component', {
      template: '<div class="my-class">A custom component!</div>',
      css: '#... my css stylesheet...'
    })

但似乎没有css选项。

我知道我可以

a) 在全局 css 样式表中定义所有 css 类或

b) 使用 singe-file-vue-components(需要构建工具支持 *.vue 文件，参见 https://v2.vuejs.org/v2/guide/single-file-components.html)

但我更愿意

c) 在注册组件时为组件指定一个css样式表。

=> 如何操作？

Answer 1

there does not seem to be a css option.

没错。你不能做你所描述的。 documentation on single file components很明显，其中一个优点是您可以使用它们来做到这一点，而没有它们就无法做到。

In many Vue projects, global components will be defined usingVue.component, followed by new Vue({ el: '#container' }) to target acontainer element in the body of every page.

This can work very well for small to medium-sized projects, whereJavaScript is only used to enhance certain views. In more complexprojects however, or when your frontend is entirely driven byJavaScript, these disadvantages become apparent:

[...]No CSS support means that while HTML and JavaScript aremodularized into components, CSS is conspicuously left out