css symbol ':global' do not support

[Dxig]

when run vite + react，use less file，the less content like this:
:global { .App-link { color: #61dafb; border: solid 1px #fff; } }
and in react component use className
<a className={'App-link'}>test</a>

and run the cmd npm run dev.

the less class do not work, because of the css file in browser has :global symbol.

when I use postcss-modules, it can transform :global symbol. but also /node-modules/, how to exclude /node-modules/

[Dxig]

solved.
rename *.less to *.module.less.

[duanbaosheng]

is there other methods? i do not want to rename file.

[bowheart]

I just bit the bullet and renamed a thousand files, but I would also love to know if there's some hidden option somewhere that can remove this requirement. Or if there isn't, maybe we can start a discussion about creating such an option?

I don't have enough context to say this requirement shouldn't exist - I'm sure whoever instigated it had a reason - but in my 1k scss file codebase, there wasn't a single exception - every single .scss file had to be renamed to .module.scss. So I definitely didn't need there to be a distinction between "modules" and non-"modules".