如何解决[plugin:vite:css] [sass]找不到要导入的样式表。 Vite React 出错？

Question

我不断收到此错误：[plugin:vite:css] [sass] 找不到要导入的样式表。在我的 Vite React 应用程序中。

我有一个

App.scss

，里面有：

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

我想从节点模块引用它们，但我不断收到此错误：

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

在我的

vite.config

文件中，我有：

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

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

Answer 1

不确定，但尝试使用文件名前不带 _ 的导入 认为这就是 scss 在编译之前获取文件的方式

像@use“~@somename/some-name/dist/tokens”一样使用它；

Answer 2

波形符

~

前缀曾经是Webpack中用于引用node_modules中的包的约定，但Vite不支持开箱即用。

像这样导入您的文件：

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

（请确保您已经安装了Vite的Sass依赖：

npm install sass --save-dev

）

此外，您可能需要在 Vite 配置文件中指定别名：

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