[Bug] scss with Qwik starter and ssr is broken

Qwik Version

v0.0.34

Operating System (or Browser)

macOs + Chrome

Node Version (if applicable)

No response

Which component is affected?

Qwik Rollup / Vite plugin

Expected Behaviour

scss styles loaded correctly

Actual Behaviour

1. npm init qwik@latest
2. Choose Starter, Express and add Prettier
3. cd qwik-app
4. npm install
5. npm install sass <-- UPDATE
6. add .mytitle { color: red; } inside global.css
7. add mytitle class to h1 selector inside app.tsx
8. rename global.css to global.scss
9. fix global.css import inside root.tsx
10. run npm run dev.ssr and mytitle class is not loaded

Additional Information

With npm run dev is working correctly

[manucorporat]

It’s also a vite thing, but when using useStyle$() it’s good to import css or scss using ?inline like this:

import styles from '../../global.scss?inline';

export const App = component$(() => {
	useStyles$(styles);
        ....
})

Otherwise vite will generate global styles, and extra .css files, in effect loading the css twice. Not very happy with this… but i cant find a better way in Vite yet

[nnelgxorz]

I don’t think it’s the right way. It’s not the wrong way either. Loading from the root.tsx should work, so I’m pretty sure this bug or something that should be documented if it’s not.

But at least we found a work-around so you can keep working. 👍