Sass preprocessor and CSS modules not working

[Tiago Porto]

Hi @fwouts, thanks to refer to this library in fwouts/react-screenshot-test#34.

The styles from my component is not being used. My guess is that SASS and CSS modules is being ignored.

Is there some example to configure that?

I'm reading the documentation for vite and seems that CSS module and SASS is already supported.

https://vitejs.dev/guide/features.html#css-modules

I tryed

// viteshot.config.js
const playwrightShooter = require('viteshot/shooters/playwright')
const playwright = require('playwright')
const vite = require('vite')

module.exports = {
  framework: {
    type: 'react',
  },
  shooter: playwrightShooter(playwright.chromium),
  filePathPattern: '**/*.screenshot.@(js|jsx|tsx|vue|svelte)',
  vite: vite.UserConfig,
}

Thank you

[François Wouts]

Hi @tiagoporto! Have you already seen the Global CSS section in https://viteshot.com/docs/config/css#global-css?

[Tiago Porto]

Hi @fwouts , yeap. It's not my case I dont have any Global CSS.

Giving a short example.

// Component.scss
.button {
  background: red,
}

import styles from 'Component.scss'

export const Component = () => {
  return <button className={styles.button}>Text</button>
}

Styles from Component.scss is not being applied

[François Wouts]

Shouldn't the import be ./Component.scss?

[Tiago Porto]

Ohh sorry, yes.
It's an error in the example I shared.
The import is correct ./Component

[François Wouts]

Just confirming is there also a syntax error in the SCSS example with the comma instead of semicolon? :)

.button {
  // background: red,
  background: red;
}

[Tiago Porto]

Hi @fwouts,
there is no syntax error.

Let me update the example, you could ignore the syntax because I'm sure that styles are working in the application.

// Component.module.scss
.button {
  background: red;
}

import styles from 'Component.module.scss'

export const Component = () => {
  return <button className={styles.button}>Text</button>
}

This is my component in the application, there is no global CSS, all the styles are in the Component.module.scss, using CSS modules and SASS.

This is the screenshot

I did a test removing SASS and CSS modules and everything works, but using SASS and CSS modules not.

[François Wouts]

Hi @tiagoporto, I've been unable to reproduce this issue. I did just notice that your config uses vite: vite.UserConfig which I think might not work, you could either omit it or use vite: {}.

If you have a minimal repro to share, I'd appreciate it!