Possibility to use scoped styles about vue-webpack-typescript

[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]

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.

[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?