[Bug] scss with Qwik starter and ssr is broken

[gioboa]

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

[nnelgxorz]

Glenn from Discord here. :wave:

Looks like this might be a vite thing?

Does running npm add -D sass help?

[nnelgxorz]

Ah. Got it working by running that command and importing the styles in my layout instead of the root.tsx and using useStyles$ inside of the layout component.

import { component$, useStyles$ } from '@builder.io/qwik';
import styles from "../global.scss"

export default component$(() => {
  useStyles$(styles);
  return ...
});

[gioboa]

sorry, I miss to report this step. I did also npm install sass after step number 4 I will update the main message

[nnelgxorz]

Cool. Let me know if moving that import and using useStyles unblocks you.

[gioboa]

Yep, I added useStyle directly inside my App component and now works correctly

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

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

is it the right way to manage scss inside Qwik?

[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. :+1:

[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

[omarbelkhodja]

I'm facing a similar issue, and it is randomly happening... I'm trying to import bootstrap files inside my own .scss file. Sometimes an error is raised [plugin:vite:css] [sass] Undefined variable. You have to refresh a few times to see this error happen, as if imported .scss files are not loaded in the correct order. I'm able to reproduce in the following stackblitz

[omarbelkhodja]

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

I'm not sure it's a vite thing... because the problem doesn't appear when using Sass with Vite, and without qwik plugins.

[manucorporat]

is this still a problem with latest?

[omarbelkhodja]

is this still a problem with latest?

I have upgraded all my project dependencies to latest versions, including latest from qwik and from vitejs. I don't see any issue anymore. Thanks !

[zanettin]

@omarbelkhodja nice! would you mind to close the issue? 🙏

[omarbelkhodja]

Sorry guys... The issue appeared again. It is very random. It is like it worked without any problem during a few days, then it reappeared again. Sometimes, it is like no problem during the first startup, but when hot reload happens, the issue appears.

[manucorporat]

The new issues is probably different and worths a new issue reproduction! i am gonna close this issue, but we should open a new one with a new repo case if in some cases it does not work.