Why are my styles not working when using SCSS Modules with Rollup?

"Why aren't my styles applying when using SCSS Modules with Rollup?"

There are a few common reasons why styles might not be applying when using SCSS Modules with Rollup:

Incorrect Configuration: Ensure that your Rollup configuration file (rollup.config.js) is correctly set up to handle SCSS Modules. This includes enabling CSS modules and using the appropriate plugins1.

Missing Dependencies: Verify that you have all necessary dependencies installed, such as rollup-plugin-postcss, postcss, and node-sass.

File Paths: Double-check that the file paths in your SCSS imports are correct and that the SCSS files are being correctly resolved.

Extract Option: If you're using the extract: true option in your Rollup configuration, ensure that the generated CSS file is correctly linked in your HTML or imported in your JavaScript files.

Class Names: When using CSS Modules, class names are typically transformed. Ensure that you are using the transformed class names in your components.

Build Process: Make sure that your build process is correctly set up and that there are no errors during the build process that might prevent the styles from being applied.

By checking these aspects, you should be able to identify and resolve the issue with your styles not applying when using SCSS Modules with Rollup.