Add global styles from child component?

Question

typescript

If css modules are enabled and typescript is configured, then all styles that are imported into the component will be scoped by default because module.
But making all styles global will result in a heavy build.

Is it possible to do something like

impost * as localStyles from 'localStyles.scss'
 @Template
@Component
export default class LayoutDefault extends Vue {
public constructor(){
super();

this.$style = { ...this.$style, ... localStyles}

}
};

because gives me an error

Property '$style' does not exist on type 'LayoutDefault

If add this

declare module 'vue/types/vue' {
// 3. Declare augmentation for Vue
    interface Test extends Vue {
        $style: { [key: string]: string }
        // $style: any
    }
}

will throw errors

TS2339: Property '$style' does not exist on type 'LayoutDefault'.
...
 TS2339: Property '$route' does not exist on type 'Main'.

adding

declare module "vue/types/options" {
    interface ComponentOptions<V extends Vue> {
        $route: any
    }
}

throws a bunch of errors

TS2345: Argument of type '{ mixins: never[]; components: {}; router: VueRouter; }' is not assignable to parameter of 
type 'ComponentOptions<Main, DefaultData<Main>, DefaultMethods<Main>, DefaultComputed, PropsDefinition<Record<string, 
any>>, Record<...>> & ThisType<...>'.
  Object literal may only specify known properties, and 'router' does not exist in type 'ComponentOptions<Main, 
DefaultData<Main>, DefaultMethods<Main>, DefaultComputed, PropsDefinition<Record<string, any>>, Record<...>> & 
ThisType<...>'.

in addition to previous

Answer 1

Kind of a mess, actually. =\
In the final code, everything should be beautiful, neat and concise, all crutches should be hidden in libs and helpers.) If it turns out not beautiful, you are doing something wrong.
If you need to type a property of a particular class, then this can be done in two ways:
1. simply declare the corresponding property:

@Template
@Component
export default class LayoutDefault extends Vue {
  protected $style: { [key: string]: string };

  public constructor(){
    super();

    this.$style = { ...this.$style, ... localStyles}
  }
};

2. declare an interface with the same name and export type as the class:

@Template
@Component
export default class LayoutDefault extends Vue {
  public constructor(){
    super();

    this.$style = { ...this.$style, ... localStyles}
  }
};
export default interface LayoutDefault {
  $style?: { [key: string]: string };
}

If you need to declare globally for Vue, then declare globally for Vue (and not for the unknown "Test", which is not in the 'vue/types/vue' module):

declare module 'vue/types/vue' {
  interface Vue {
    $style: { [key: string]: string }
  }
}

PS Vue.mixin is a global mixin, so doing like this:

Vue.mixin(
    CSSModules(
        {
            // be careful, 'class' also use by 3-d parties libs classes
            injectAttr: 'class',
            // styles are merged with this.$style by default
            styles:     {...stylesFonts, ...stylesCommon, ...styles},
        }
    )
);

you mix these styles into all Vue components at once, regardless of the file.