Support CSS modules: Property '$style' does not exist on type

• I have searched through existing issues

Feature Request

It would be amazing if Vetur would support CSS modules using following syntax:

<template>
  <div :class="[$style.button]">
   Hello
  </div>
</template>

<style module>
.button {
  color: green;
}
</style>

[iqingting]

Add a new file in your project. You can get basic support.

// shims-css-module-vue.d.ts
import Vue from 'vue'

declare module 'vue/types/vue' {
  interface Vue {
    $style: Record<string, string>
  }
}

Unfortunately, this doesn’t work anymore with vue3 since the component type is the return type of the defineComponent function and you can’t augment a type with a new property like you can with an interface. Any ideas?

this worked to me

import { ComponentCustomProperties } from 'vue'

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $style: {
      [key: string]: string
    }
  }
}

[yoyo930021]

Add a new file in your project. You can get basic support.

// shims-css-module-vue.d.ts
import Vue from 'vue'

declare module 'vue/types/vue' {
  interface Vue {
    $style: Record<string, string>
  }
}