如何在不使用单个文件组件的情况下获得组件范围的CSS？

Question

是否有可能获得组件范围的CSS，即

<style scoped>
...
</style>

没有使用单个文件组件？

例如，我有一个组件：

// MyComponent.ts

import { Vue, Component } from 'vue-property-decorator'

@Component({
  template: '<h1>Not a Single File Component</h1>'
})
export default class MyComponent extends Vue {}

如何添加样式，例如：

h1 {
  color: blue;
}

但它只限于MyComponent.ts吗？

由于要使用此组件，我将其导入为：

import MyComponent from './MyComponent'

这不是单个文件组件，也没有<style scoped>...</style>

Answer 1

你可以这样做样式绑定：

@Component({
  template: '<h1 :style="color: blue;">Not a Single File Component</h1>'
})

或者，您可以为h1指定一个id，并专门在样式表中引用id。

@Component({
  template: '<h1 id="whatever-this-is">Not a Single File Component</h1>'
})

...

<style>
    #whatever-this-is {
        color: blue;
      }
</style>