Undefined variable error when using sass @use (@import nd forward)

[Milan-960]

Describe the bug

I am trying to import my _variables.scss file in to my App.scss and it does not work and shows me an error

src/styles/App.scss 18:26  root stylesheet
18:38:35 [vite] Internal server error: [sass] Undefined variable.
   ╷
18 │   box-shadow: 0 6px 12px $box-shadow-light;
   │                          ^^^^^^^^^^^^^^^^^
   ╵
  src/styles/App.scss 18:26  root stylesheet
  Plugin: vite:css

I also tried this as well

@forward "./variables";

and it is not working at some points :( please help what else shall I do!

This is my vite.config.js

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";

export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000,
    host: true,
    strictPort: true,
  },
  build: {
    sourcemap: true,
    outDir: "dist",
    emptyOutDir: true,
    rollupOptions: {
      output: {
        manualChunks: {
          leaflet: ["leaflet", "leaflet-control-geocoder"],
          chartjs: ["chart.js", "react-chartjs-2"],
          react: ["react", "react-dom"],
        },
      },
    },
    chunkSizeWarningLimit: 600, // Adjust the limit if necessary
  },
  css: {
    preprocessorOptions: {
      scss: {
        // Use the new API for scss preprocessing in Vite
        // ref: https://vite.dev/config/shared-options#css-preprocessoroptions
        api: "modern-compiler", // or "modern"
        sourceMap: true,
      },
    },
  },
  optimizeDeps: {
    include: ["leaflet", "leaflet-control-geocoder", "screenfull"],
  },
});

Reproduction

#11612

Steps to reproduce

npm run dev

System Info

System:
    OS: macOS 14.4
    CPU: (10) arm64 Apple M2 Pro
    Memory: 81.73 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.12.2 - ~/.nvm/versions/node/v20.12.2/bin/node
    Yarn: 1.22.17 - /usr/local/bin/yarn
    npm: 10.8.2 - ~/.nvm/versions/node/v20.12.2/bin/npm
    pnpm: 9.12.0 - ~/.nvm/versions/node/v18.16.0/bin/pnpm
    bun: 1.0.1 - ~/.bun/bin/bun
    Watchman: 2024.10.28.00 - /opt/homebrew/bin/watchman
  Browsers:
    Brave Browser: 126.1.67.119
    Chrome: 130.0.6723.119
    Edge: 131.0.2903.48
    Safari: 17.4
  npmPackages:
    @vitejs/plugin-react-swc: ^3.5.0 => 3.7.1 
    vite: ^5.4.10 => 5.4.11

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.

Tasks

Beta Give feedback

No tasks being tracked yet.