SASS and SCSS Undefined variable in production build after upgrading from v4 to v5

[nsmithdev]

Describe the bug

After upgrading from v4 to v5 I am receiving lots of error related to undefined variables errors only in production build. No config change were made only npm package version upgrade.

Before: "vite": "^4.4.8", After: "vite": "^5.0.0",

I can still compile with scss manually with command: .\node_modules\.bin\sass --load-path=node_modules .\src\assets\styles\app.scss

Did something change with how scss variable scoping works etc? I can't find anything in the release notes.

I wanted to check if there was a simple solution before creating a reproduction. I'll post it soon as I can create one.

Reproduction

a

Steps to reproduce

No response

System Info

Windows and sass 1.64.2 though I have tried updating it also.

Used Package Manager

npm

Logs

error during build: Error: Undefined variable.

Validations

• [X] Follow our Code of Conduct
• [X] Read the Contributing Guidelines.
• [X] Read the docs.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] 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.
• [X] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• [X] The provided reproduction is a minimal reproducible example of the bug.

[nsmithdev]

It seems to be treating all my scss files as individual entry points and or trying to compile them individually even if they are not referenced by any react code. I was able to rename one of the files to a random name 99common99.scss and it's still trying to compile it. When I create a new project i'm not seeing it behave the same way.

[nsmithdev]

Ok I tracked it down to a usage of URL() with import.meta.url which was causing it to try and compile all my scss files under assets individually.

<img className='logo' src={ getAssetUrl(`companyLogos/${ user.companyLogoName }`) } alt='altLogo'/>

export const getAssetUrl = (path) => {
  return new URL(`../assets/${ path }`, import.meta.url).href
}

Updating ../assets/${ path } to ../assets/companyLogos/${ path } made it stop compiling the unreferenced scss files.

[github-actions[bot]]

Hello @nsmithdev. Please provide a minimal reproduction using a GitHub repository or StackBlitz. Issues marked with needs reproduction will be closed if they have no activity within 3 days.