Multi theme nextjs

Question

I am building a multi theme application as it will be deployed on different urls using different themes.

My idea was to use an env variable, in my case APPLICATION_VERSION which can be v1, v2 or v3

I am passing the variable to my sass using next.config.js

const { i18n } = require('./next-i18next.config');

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  i18n,
  sassOptions: {
    prependData: `$theme: ${process.env.APPLICATION_VERSION};`,
  },
  env: {
    APPLICATION_ENVIRONMENT: process.env.APPLICATION_ENVIRONMENT,
    APPLICATION_LOCALES_KEY: process.env.APPLICATION_LOCALES_KEY,
    APPLICATION_VERSION: process.env.APPLICATION_VERSION,
  }
}

module.exports = nextConfig

Then in my scss I created a mixin

@mixin isTheme($value) {
    @if $theme == $value {
        @content;
    }
}

In local this is working with some issues, when I am changing the APPLICATION_VERSION value I have to edit all my *.module.scss files so the isTheme mixin is taken into account.

I tried to deploy it with vercel and seems that the isTheme mixin is ignored

This is my build script where vars are passed

#!/bin/bash

rm package-lock.json
npm i
node ./bin/locales.js
npm i -g vercel
DEPLOYMENT_URL=$(VERCEL_ORG_ID=$VERCEL_ORG_ID VERCEL_PROJECT_ID=$VERCEL_PROJECT_ID vercel --confirm \
    --token $VERCEL_TOKEN \
    --build-env APPLICATION_ENVIRONMENT=staging \
    --env APPLICATION_ENVIRONMENT=staging \
    --build-env APPLICATION_VERSION=$APPLICATION_VERSION \
    --env APPLICATION_VERSION=$APPLICATION_VERSION \
    --regions fra1 )

vercel alias set $DEPLOYMENT_URL $APPLICATION_URL -t $VERCEL_TOKEN --scope $SCOPE

But when deployed threw vercel the content of isTheme mixin is not displayed