SvelteKit 如何让 SCSS 变量与 mixin 对所有组件全局可用？

SvelteKit 底层基于 Vite 构建，Vite 原生支持预处理器全局资源注入，不需要额外安装第三方插件即可实现和 Nuxt Style Resources 包相同的效果，具体操作如下：

• 第一步：安装 SCSS 依赖（已安装可跳过）
  执行命令：npm install sass --save-dev
• 第二步：修改项目根目录的 svelte.config.js 配置文件
  添加 Vite 预处理器配置，示例如下：

  import adapter from '@sveltejs/adapter-auto';
  import { vitePreprocess } from '@sveltejs/kit/vite';
  
  const config = {
    preprocess: vitePreprocess(),
    kit: {
      adapter: adapter(),
      vite: {
        css: {
          preprocessorOptions: {
            scss: {
              // 此处替换为你自己的全局SCSS文件路径，多个文件用分号分隔
              additionalData: `@use '$lib/styles/variables.scss' as *; @use '$lib/styles/mixins.scss' as *;`
            }
          }
        }
      }
    }
  };
  
  export default config;
  

• 第三步：重启开发服务，配置即可生效，你可以在任意组件的 <style lang="scss"> 块内直接使用全局定义的变量、mixin，无需单独导入。

注意事项 #

• 路径中的 $lib 是 SvelteKit 官方默认别名，对应 src/lib 目录，你可以根据自己的文件存放位置调整为相对路径或者其他自定义别名路径
• 如果你使用的是旧版 SCSS 的 @import 导入语法，把配置中的 @use 替换为 @import 即可，注意每个导入语句末尾必须加分号

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