SvelteKit中Sass无法解析node_modules样式文件的问题求助

问题根源在于Vite的模块解析规则默认遵循第三方包package.json的exports字段，而@dfinity/gix-components并未在exports中声明该SCSS文件的路径，同时Sass的导入路径需要配合Vite配置才能正确识别node_modules中的资源。以下是可行的解决方法：

方法一：配置Vite路径别名（推荐） #

在项目根目录的svelte.config.js中，给目标SCSS路径添加别名，简化导入语法：

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [sveltekit()],
  resolve: {
    alias: {
      '@dfinity/gix-components-mixins': '@dfinity/gix-components/dist/styles/mixins'
    }
  }
});

之后在组件的<style>中可以这样导入：

<style lang="scss">
  @use "@dfinity/gix-components-mixins/media";
</style>

方法二：配置Sass的includePaths #

让Sass自动搜索node_modules目录，无需写完整包路径前缀：
修改svelte.config.js的CSS预处理器配置：

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';

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

此时导入语法可以简化为：

<style lang="scss">
  @use "@dfinity/gix-components/dist/styles/mixins/media";
</style>

方法三：修改第三方包的package.json（仅适用于可编辑包的场景） #

如果你有权限修改@dfinity/gix-components的package.json，可以在exports字段中声明该SCSS文件的导出路径：

"exports": {
  "./dist/styles/mixins/media": "./dist/styles/mixins/media.scss"
}

添加后即可直接使用最初的导入语法，无需额外配置项目。

注意事项 #

1. 确保已安装Sass依赖：执行npm install sass --save-dev，SvelteKit需要该预处理器处理SCSS文件。
2. 配置修改后，建议清理Vite缓存并重启开发服务：npm run dev -- --clear-cache。

内容的提问来源于stack exchange，提问作者David Dal Busco