vitejs / vite

Next generation frontend tooling. It's fast!
http://vite.dev
MIT License
68.64k stars 6.2k forks source link

Switching to Sass Modern API throwing errors for @import #18245

Closed KieranP closed 1 month ago

KieranP commented 1 month ago

Describe the bug

Upgraded sass package to 1.79.4, started spitting out deprecation warnings. As per the Vite config docs, I added the following to vite.config.ts

    preprocessorOptions: {
      scss: {
        api: 'modern'
      }
    }

But now I'm getting 100s of errors:

Error: Error while preprocessing /Volumes/Work/app/frontend/javascripts/components/menus/svelte_select.svelte - [sass] Error: Can't find stylesheet to import.
  ╷
2 │   @import 'app/frontend/stylesheets/variables.scss';

I had to setup an alias for @styles to app/frontend/stylesheets, and then use:

@import '@styles/variables.scss';

which seems to have worked around it.

Is this breakage expected?

Reproduction

NA

Steps to reproduce

No response

System Info

System:
    OS: macOS 14.7
    CPU: (12) arm64 Apple M3 Pro
    Memory: 101.92 MB / 18.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.15.1 - ~/.asdf/installs/nodejs/20.15.1/bin/node
    Yarn: 4.3.1 - ~/.asdf/installs/nodejs/20.15.1/bin/yarn
    npm: 10.8.2 - ~/.asdf/plugins/nodejs/shims/npm
    bun: 1.1.0 - ~/.bun/bin/bun
  Browsers:
    Chrome: 129.0.6668.71
    Safari: 18.0
  npmPackages:
    vite: ^5.4.8 => 5.4.8

Used Package Manager

yarn

Logs

No response

Validations

hi-ogawa commented 1 month ago

Is this breakage expected?

It's hard to tell without exact reproduction. Can you provide one please?

github-actions[bot] commented 1 month ago

Hello @KieranP. 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.