Deep importing .module.scss file compiles in dev but not build

[moishinetzer]

Describe the bug

Description

When importing .module.scss files directly from a dependency package (in my reproduction case @acme/ui is the "external" package, but you could imagine any dependency instead) in a Vite project, the imports work correctly in development mode but none of the styles are applied/compiled during production build. This does not work both when importing a module from another module scss file or directly from the application code.

Reproduction

Project structure:

apps/
  vite-project/
    src/
      App.tsx
packages/
  ui/
    src/
      button.module.scss
      button.tsx

Code Examples

apps/vite-project/src/App.tsx

import '@acme/ui/src/button.module.scss'
// This import works in dev but fails in build

packages/ui/package.json

{
  "name": "@acme/ui",
  "exports": {
    ".": {
      "types": "./dist/src/index.d.ts",
      "default": "./src/index.ts"
    },
    "./*": {
      "types": "./dist/src/*.d.ts",
      "default": [
        "./src/*.ts",
        "./src/*.tsx"
      ]
    }
  }
}

Expected Behavior

• SCSS Modules imports from workspace packages should work consistently in both development and production builds even when deeply imported from dependency
• Styles should be properly processed and included in the final bundle

Actual Behavior

• Development mode (pnpm dev): CSS Modules imports work correctly

• Production build (pnpm build): Build does not apply styles with module resolution errors for deep imports of .module.scss files from node modules

Environment

• Vite: 6.0.1 (IMPORTANT: Also not working in 5.4.10)
• Node.js: 20.18
• OS: MacOS Latest
• Package Manager: pnpm (also appears using npm, yarn)

Additional Context

This issue appears to be related to how Vite handles CSS Modules imports from node_modules during production builds. While the development server can resolve these imports through the workspace, the production build seems to have different module resolution rules.

Would appreciate guidance on the recommended approach to handle SCSS Modules imports from both workspace packages and dependencies in Vite projects.

Reproduction

https://github.com/moishinetzer/vite-scss-modules-reproduction

Steps to reproduce

Compare pnpm dev with pnpm build

System Info

System:
    OS: macOS 14.7.2
    CPU: (8) arm64 Apple M2
    Memory: 60.22 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.18.1 - ~/.nvm/versions/node/v20.18.1/bin/node
    Yarn: 1.22.22 - ~/.nvm/versions/node/v20.12.2/bin/yarn
    npm: 10.8.2 - ~/.nvm/versions/node/v20.18.1/bin/npm
    Watchman: 2024.11.11.00 - /opt/homebrew/bin/watchman
  Browsers:
    Chrome: 131.0.6778.140
    Safari: 18.2

Used Package Manager

pnpm

Logs

VITE v6.0.3 ready in 115 ms

➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h + enter to show help
Deprecation Warning: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.

More info: https://sass-lang.com/d/legacy-js-api

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.

[sapphi-red]

More smaller reproduction: https://stackblitz.com/edit/vitejs-vite-kakz5upv?terminal=dev

This is caused by #16051.
The workaround is to add this plugin: #16051 (comment).