Setting css.modules.scopeBehaviour has no effect unless filename includes .module.

[NoelAbrahams]

Describe the bug

The Problem

According to the docs, vite.config.ts → css.modules.scopeBehaviour is passed through to postcss-modules, which “assumes all classes are local by default” and allows users to override that behaviour.

However, in practice Vite only applies the CSS Modules transform to files whose names include the .module. infix (e.g. button.module.scss).

When the same file is renamed to button.scss, the transform is skipped entirely — the file is treated as global CSS — even if scopeBehaviour: 'local' is explicitly set.

This means the scopeBehaviour option is effectively ignored unless the filename matches the internal .module. regex in Vite’s CSS plugin.

Why this matters

In many modern component-based codebases the overwhelming majority of styles are written as CSS Modules — with perhaps a single global theme file. The .module suffix therefore becomes redundant in frameworks that assume “module by default”.

Reproduction

Requires multiple steps, hence not possible

Steps to reproduce

1 Create a Vite project.

Add this to vite.config.ts:

export default {
  css: {
    modules: { scopeBehaviour: 'local' }
  }
};

2 Create App.scss:

.foo { color: red; }

3. Import it in App.tsx:

import styles from './App.scss';
console.log(styles);

Run vite.

System Info

Browser error
The requested module '/src/App.scss' does not provide an export named 'default'.

Used Package Manager

npm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[ia319]

Core issue

Vite enforces the .module. filename convention to enable CSS Modules, which causes the css.modules.scopeBehaviour configuration option to have no effect.

In packages/vite/src/node/plugins/css.ts at lines 224 and 1426, we have:

const cssModuleRE = new RegExp(`\\.module${CSS_LANGS_RE.source}`)
const isModule = modulesOptions !== false && cssModuleRE.test(id) 

This code ignores the value of the scopeBehaviour configuration.

Is this the intended behavior in Vite?

If not, I can modify the logic at line 1426 so that it respects both the scopeBehaviour configuration and the .module. filename convention, while still allowing specific files to be excluded through globalModulePaths.

[NoelAbrahams]

@ia319, yes, you seem to have identified it.

IMO enforcing .module. is an unnecessary limitation for people who want to structure things differently.

From a user point of view, I just want to be able to set:

modules: { scopeBehaviour: 'local' }

and call my files what I like — provided they have the right file extension.