Vue-class-component: Styles?

[howesteve]

Hello,

I really like this approach, but I miss styling. How to embed scoped styles in a component? Similiar to *.vue's <style scoped> tags ?

Thanks,
Howe

[egoist]

Try css-modules? and vue-loader should work too.

[ktsn]

As @egoist said, we can use css-module on render hook and vue-loader should also work for class-style component.

[SpareShade]

@ktsn
any chance you can point how to have import scoped css?
thank you!

[ktsn]

Just use vue-loader's scoped css.

[rmartins90]

I'm currently importing style inside my component.ts file:

import "./component.scss";

Can you please show an example on how to use this on render hook?

[vekexasia]

using import doesn't work for me. still trying to understand how to import css.

[Bleser]

vue.d.ts

declare module 'vue/types/options' {
  interface ComponentOptions<V extends Vue> {
    style?: any;
  }
}

style.d.ts

declare module "*.scss" {
    const content: string;
    export default content;
}

component.ts

import Vue from 'vue';
import Component from 'vue-class-component';
import template from "./component.html"
import style from "./component.scss"

@Component({
    template,
    style
})
export default class Component extends Vue {
   ...
}

But I have not yet found a way to import styles as scoped.

[milewski]

@Bleser92 having that style key into the @Component is pointless, it is not being understood by the component, in your case it "works" because u might be extracting the .scss to a external file.... so having that style key doesnt change anything..

however i think it's impossible to add styles at the current dev stage of this lib.... i'm rolling back to .vue files :( only

[gsafety1]

@howesteve
I have the same idea as you. Find a good solution later.
use vue-css-ts
example

[howesteve]

Thanks, I have switched to React because of these and other issues, but I'll look into it.