Undefined variable error when using sass @use (@import and 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

[sapphi-red]

@use works differently from @import.

@use only makes variables, functions, and mixins available within the scope of the current file. It never adds them to the global scope. This makes it easy to figure out where each name your Sass file references comes from, and means you can use shorter names without any risk of collision.
https://sass-lang.com/documentation/at-rules/use/#differences-from-import

Probably you have to change $box-shadow-light to $filename.box-shadow-light or add as * after the @use.

[Milan-960]

@use works differently from @import.

@use only makes variables, functions, and mixins available within the scope of the current file. It never adds them to the global scope. This makes it easy to figure out where each name your Sass file references comes from, and means you can use shorter names without any risk of collision.
https://sass-lang.com/documentation/at-rules/use/#differences-from-import

Probably you have to change $box-shadow-light to $filename.box-shadow-light or add as * after the @use.

Yup that is what I tried at some point even I updated the vite.config.ts and did tried inside the

  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,
      },
    },
  },

and here I added something like this inside my vite config 👇

additionalData: @use 'src/styles/variables' as *;,

and it did not worked then I tried to look for another way to do it and at the end what I noticed was I need to use the * import in order to import everything.

so like this in order to make it working 👇

@use '_variables.scss' as *;