Nuxt 3中SCSS文件`~`符号无法识别的问题如何解决？

我已通过在Nuxt配置中添加以下代码，成功配置Nuxt使用名为app.scss的CSS文件：

export default defineNuxtConfig({
  css: ['@/assets/styles/app.scss'],
})

但尝试在app.scss中使用@use语法导入Node模块中的SCSS文件时遇到报错：

[vite-node] [plugin:vite:css] [VITE_ERROR] ./assets/styles/app.scss:1:1

Error: Can't find stylesheet to import.
  ╷
1 │ ┌ @use "~@neolithic-css/toolkit" as neolithic with
2 │ │ (
3 │ │   $mobile-first: false,
4 │ │ );
  │ └─^
  ╵
  assets/styles/app.scss 1:1  root stylesheet

我在app.scss中使用的导入代码如下：

@use "~@neolithic-css/toolkit" as neolithic with (
  $mobile-first: false,
);

问题出在Vite无法识别指向node_modules目录的~符号，可通过以下方式修复：

修复方案 #

• 移除~符号直接导入：Vite会自动在node_modules目录下查找对应的包，修改后的代码如下：

@use "@neolithic-css/toolkit" as neolithic with (
  $mobile-first: false,
);

• 指定包内具体SCSS入口文件：如果包的根目录没有默认导出SCSS文件，可明确指定入口路径（例如包内的src/index.scss）：

@use "@neolithic-css/toolkit/src/index.scss" as neolithic with (
  $mobile-first: false,
);

• 配置Vite的SCSS解析路径（可选）：若需要统一配置路径解析规则，可在nuxt.config.ts中添加Vite的预处理器配置，让SCSS解析器包含node_modules目录：

export default defineNuxtConfig({
  css: ['@/assets/styles/app.scss'],
  vite: {
    css: {
      preprocessorOptions: {
        scss: {
          includePaths: ['node_modules'],
        },
      },
    },
  },
})

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