CSS Compiler Issue

[shaq-tff]

Hello everyone, I just started using Bit and been struggling with the issue I'm facing with compiler. I've published a Bit component and tried to use it on a NextJS App , but I'm getting error on CSS. I suspect that it is because the built in compiler of Bit in react environment.

Here's the error when I import a SCSS Modules:

Here are the compiled files:

Here's how I imported the Bit component:

At first I thought it was CSS Modules that's producing the error, so I tried to make it just plain css. But it gives this new error:

I was just wondering if I did something wrong or it's just that compiling CSS is not a built-in functionality of Bit compiler?

By the way, the component that I'm testing is in React Environment:

[benjgil]

hi @shaq-tff

tl;dr - these are actually nextjs things - e.g. here. Nextjs doesnt compile things from node_modules (and also wont accept global css from there if you're just flat importing a css file in a component).
The best solution if you still want to use scss with your bit components is to get nextjs to compile them using the next-transpile-modules package.

More detail:
Bit doesnt compile your css, so that the consuming application will compile it using it's own minification etc strategy. So in this case if your app could use sass @use etc functions/mixins and only convert to css at the bundling stage.
I do however have a task open to create a css compilation task, for those who need it, so that might be available soon. But i cant say when i'll get to it, so it's best to go for next-tm for now as above

[shaq-tff]

Hello @benjgil, thank you so much for helping out! It now works on NextJS, however, I tried it on Shopify Hydrogen and it produces the same error. Hydrogen uses Vite for compiler, for that to fix, I needed to do something similar in Vite config, right?

By the way, thank you for the info about Bit not compiling scss. I agree with that approach, that's more powerful since we could consume some mixins / placeholders / variables, etc. via @use

[benjgil]

Yep, I would guess you'll need to add the same to Vite's config like you said.