如何解决Vite React中[plugin:vite:css][sass]样式表导入找不到错误？

问题原因 #

Vite 不支持 Webpack 里常用的 ~ 前缀来解析 node_modules 路径，你写的 @use "~@somename/some-name/dist/_tokens.scss" 会导致 Sass 找不到对应的样式文件。

解决方案 #

方案1：直接修改导入路径 #

删掉路径里的 ~ 符号，Sass 会自动从 node_modules 目录下查找目标包：

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

方案2：配置Vite指定Sass搜索路径 #

修改 vite.config.js，添加 CSS 预处理器配置，把 node_modules 设为 Sass 的搜索目录：

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

export default defineConfig({
  plugins: [react()],
  css: {
    preprocessorOptions: {
      scss: {
        includePaths: ['node_modules'],
      },
    },
  },
})

额外检查事项 #

1. 确认已经通过 npm install @somename/some-name 正确安装了目标依赖包
2. 修改路径或配置后，重启 Vite 开发服务

内容的提问来源于stack exchange，提问作者happy_story