How to resolve [plugin:vite:css] [sass] Can't find stylesheet to import. error in Vite React?

Question

I keep getting this error: [plugin:vite:css] [sass] Can't find stylesheet to import. in my Vite React app.

I have an App.scss, and in it, I have:

@use "~@somename/some-name/dist/_tokens.scss";

I want to reference them from the node modules, but I keep getting this error:

Error: Can't find stylesheet to import.
    ╷
  1 │ @use "~@somename/some-name/dist/_tokens.scss";
    │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    ╵
    src\App.scss 1:1  root stylesheet

Inside my vite.config file, I have:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
})

Answer 1

The tilde ~ prefix used to be a convention in Webpack for referencing packages in node_modules, but Vite doesn't support that out of the box.

Import your file like this: @use "@somename/some-name/dist/_tokens.scss";

(Make sure you have installed the Vite's Sass dependency: npm install sass --save-dev)

Moreover, you might have to specify aliasing in the Vite config file:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path'

export default defineConfig({
    plugins: [react()],
    resolve: {
        alias: {
            '@': path.resolve(__dirname, './src'),
        },
    },
})