Dynamic classname in css file

[yogesh45]

I am adding a scss file for my component

But after compiled in dist/index.css file the classname added inside my scss files get changed

SCSS :
.selected{
background-color: blue;
color: white;
}
.blured{
color: #ccc;
opacity: 0.5;
pointer-events: none;
}
.header{
width: 100px;
}

Index.css
._NBCalender__selected__2iz2b{
background-color: blue;
color: white;
}
._NBCalender__blured__2dYaJ{
color: #ccc;
opacity: 0.5;
pointer-events: none;
}
._NBCalender-style__selected__tbQ82 {
background-color: blue;
color: white; }

._NBCalender-style__blured__2f44- {
color: #ccc;
opacity: 0.5;
pointer-events: none; }

._NBCalender-style__header__3kezG {
width: 100px; }

Is there any way to fix this

[Hari]

For some reason microbundle-crl treats *.scss files like modules and does this. Disabling css modules fixes this problem: https://github.com/developit/microbundle#css-and-css-modules

so in your package.json change the scripts to

    "build": "microbundle-crl --no-compress --no-css-modules --format modern,cjs",
    "start": "microbundle-crl watch --no-compress --no-css-modules --format modern,cjs",

[gabriel-visualthinking]

For some reason microbundle-crl treats *.scss files like modules and does this. Disabling css modules fixes this problem: https://github.com/developit/microbundle#css-and-css-modules

so in your package.json change the scripts to

    "build": "microbundle-crl --no-compress --no-css-modules --format modern,cjs",
    "start": "microbundle-crl watch --no-compress --no-css-modules --format modern,cjs",

Thank you! This did indeed work. Only problem is that now I can't use modules, so not the ideal solution, but I can make it work. I'm assuming there's no way to use both right?