vitejs treat all .scss files as css modules

Question

I am working with a legacy package in a monorepo and am including in the optimizeDeps array - is it possible to tell Vite to treat all .scss files it sees as CSS Modules files?

Originally asked in the vite discord: https://discord.com/channels/804011606160703521/1217522070343254016

The problem is that this legacy package has all its css modules files as plain .scss files instead of .module.scss which vite expects, and so I see this error:

The requested module '/@fs/Users/jakxz/go/src/.../components/fields/EditableField/EditableField.scss' does not provide an export named 'default''

EditableField.js is a compiled ESM react component that attempts to do

import styles from './EditableField.scss';

Answer 1

In your vite.config.js export default { css: { preprocessorOptions: { scss: { modules: true } } } }

This will ensure that Vite interprets all .scss files as CSS Modules

Answer 2

By configuring vite.config.js file like below, all .scss files will be treated as CSS Modules files, regardless of their file extension:

// vite.config.js
export default {
  optimizeDeps: {
    include: ['**/*.scss'], // Include all .scss files
  },
  css: {
    modules: {
      // Enable CSS Modules for all .scss files
      localsConvention: 'camelCaseOnly',
    },
  },
};