Possibility to use scoped styles

[selenecodes]

Hey, first of all awesome work on this template!
I was wondering if there will be support for scoped styles in the future?
Because *.vue files already natively support <style scoped src="./nameOfComponent.scss"></style>.
I mean I love the way the import "./nameOfComponent.scss" works but maybe add styles as a component parameter just like template.

Proposed idea:

@Component({
    template: require('./home.html'),
    styleUrls: [ './home.scss', './secondHomeStyles.scss' ] //how angular2 does it
})

or this way

@Component({
    template: require('./home.html'),
    style: require('./home.scss') //an approach more similar to the template.
})

I don't know if this is at all feasible or if there's already a workaround that doesn't involve switching to vue files.

[ducksoupdev]

Hi, thanks for the compliment :)

In terms of scoped styles, I have used CSS modules in a React app with PostCSS and Webpack. It should fit nicely and provide what is needed. It won't be the same style as *.vue files but should have the same result.

There is a nice article on it here https://medium.com/@kswanie21/css-modules-sass-in-create-react-app-37c3152de9

Happy to investigate or leave it up to you to create a PR?

[selenecodes]

Oh thanks, will look into it!
If I get a working implementation I'll make a PR for it.

[arihantdaga]

I used something old style...
in my scss files i wrote

[data-comp="home"]{
    p {
          coolor: red
    }
}

and in my component's outer tag-

<div data-comp="home"></div>

Is this good ??

[ducksoupdev]

I have created a spike repo to show how it could work with this template - ducksoupdev/vue-webpack-typescript-css-modules@f4c57e6...a406361

If this is what you are looking for @joostblok I can add it to the template?

[ducksoupdev]

See discussion at css-modules/css-modules#65.

The above repo is an implementation that contains two loader configurations for .scss files. This is to explicitly separate CSS modules from global CSS files.

[admhemed]

Hi, I used ducksoupdev/vue-webpack-typescript-css-modules@f4c57e6...a406361
and it is successfully work,
but css stopped to reload properly,
it reloads, but it brings the old css instead of the new one,
what can I do to fix that?