Support for (S)CSS modules

[Zorgatone]

Qwik Version

0.0.39

Operating System (or Browser)

chrome 103 on windows 11

Node Version (if applicable)

node 18

Which component is affected?

Qwik Rollup / Vite plugin

Expected Behaviour

If I import a SCSS module like this:

import { component$, Host } from '@builder.io/qwik';

import classes from './greet.module.scss';

export const Greet = component$(() => {
  return (
    <Host>
      <div>Hello <span class={classes.pink}>pink</span>!</div>
    </Host>
  );
});

The class name should be applied to the DOM element AND the styles should be appended to the page (if sass is installed)

Actual Behaviour

The class name is applied to the DOM element but the styles are not in the page (even if I have sass installed). Regular non-module scss do work though (ie. import "./greet.scss")

Additional Information

No response

[yorqat]

bump. any updates on this? only thing stopping me from using qwik for prod

[jrson83]

bump. any updates on this? only thing stopping me from using qwik for prod

Yeah, same here. SASS support would be a great addition.

[TheKinng96]

I am now following the style guides at https://qwik.builder.io/tutorial/style/scoped/ but I really hope we have SASS support ready

[TheKinng96]

Hi there, I have scss running normally

1. npm add -D sass
2. import the scss file with '?inline'
3. useStylesScoped$(styles);

example: in your component

import { component$, useStylesScoped$ } from '@builder.io/qwik';
import styles from './your-file.scss?inline';

export default component$(() => {
    useStylesScoped$(styles);
    return <h1>H1 tag</h1>
}

[IgorSzymanski]

@TheKinng96 The thing you're talking about is unrelated to the issue. The issue described here is related to CSS modules (namely, files named *.module.(s)css. Now the problem is CSS modules seem to only work with CSS files, but not SCSS files. Vite out of the box is supposed to handle the compilation from SCSS to CSS, but it seems the styles are processed, because classes created by CSS modules are added to HTML elements, but the stylesheet is missing, so the classes reference non-existing styles.

[tjmosia]

@TheKinng96 The thing you're talking about is unrelated to the issue. The issue described here is related to CSS modules (namely, files named *.module.(s)css. Now the problem is CSS modules seem to only work with CSS files, but not SCSS files. Vite out of the box is supposed to handle the compilation from SCSS to CSS, but it seems the styles are processed, because classes created by CSS modules are added to HTML elements, but the stylesheet is missing, so the classes reference non-existing styles.

I see this is still the issue. I wonder if the guys are considering it?