CSS Modules with Sass?

[DaveAllbirds]

Is it possible to use CSS Modules with Sass? I've been trying to get the following working without any luck:

/* button.module.scss */

@import '~/styles/mediaQueries.scss';

.button {
  @include mediumUp {
    padding-top: calc(var(--spacing) * 10px);
  }
}

Ideally, I'm looking for CSS bundling so there aren't .css files generated in the codebase.

Thanks!

[benjaminsehl]

@markdalgleish — have you looked at this in combo with https://github.com/postcss/postcss-scss?

[markdalgleish]

That's a good point that we'd want to ensure PostCSS can be used with Sass styles.

[benjaminsehl]

I'd assume folks like @DaveAllbirds would be comfortable using SCSS within PostCSS instead, if it makes things easier.

From what I understand, the above package isn't compatible with the Remix PostCSS CSS Modules approach. Should it be?

[markdalgleish]

It doesn't compile SCSS to CSS, it simply allows you to perform PostCSS transformations on SCSS files. We'd still need to integrate Sass into Remix to support SCSS + CSS Modules.

[markdalgleish]

It's not currently possible but this is definitely on our radar. It looks like someone already opened a proposal for Sass support more broadly, so I'd recommend showing your support there in the meantime: #5432

[wingleung]

there's a couple of scss topics apparantly 😅
I kickstarted a PoC to have SCSS and SCSS modules support in Remix, if interested please provide some feedback

• PR 👉 [WIP] add scss and scss modules support #7612

Related discussions

• [Feature] Sass support #5432
• SCSS Modules #6282