为何SvelteKit中需重复引入Bootstrap SCSS混合文件而非全局生效？

问题背景 #

你在SvelteKit项目的+layout.svelte中按顺序导入了Bootstrap主SCSS文件、图标样式，最后导入自定义的custom.scss，但自定义文件中使用@include media-breakpoint-up(sm)时触发了Undefined mixin错误。只有在custom.scss中单独导入bootstrap/scss/mixins才能解决，而之前用Laravel Mix时没有这个问题。

核心原因：Vite与Laravel Mix的SCSS处理逻辑差异 #

这本质是Vite和Laravel Mix对SCSS模块的隔离机制不同：

• Vite的模块隔离：Vite将每个SCSS文件视为独立的模块，模块之间的变量、混入、函数不会自动共享。哪怕你在+layout.svelte里先导入了bootstrap.scss，它的内部资源（比如混入）只会作用于自身模块，不会自动渗透到后续导入的custom.scss中。
• Laravel Mix的全局共享：Laravel Mix在处理SCSS时，默认会把主样式文件的内容全局暴露，后续所有SCSS文件都能直接引用这些全局资源，无需重复导入依赖。

解决方案 #

有两种实用方式可以解决这个问题：

方案1：在自定义SCSS中显式导入依赖

直接在custom.scss开头导入Bootstrap的核心基础文件，确保混入和变量可用：

// custom.scss 开头添加
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";

// 你的自定义样式代码
@include media-breakpoint-up(sm) {
  // ... 你的样式
}

方案2：通过Vite全局预注入依赖

修改vite.config.js，配置全局预注入Bootstrap的核心依赖，这样所有SCSS文件都能直接使用这些资源，无需手动导入：

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

export default defineConfig({
  plugins: [sveltekit()],
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `
          @import "bootstrap/scss/functions";
          @import "bootstrap/scss/variables";
          @import "bootstrap/scss/mixins";
        `
      }
    }
  }
});

这种方式适合需要在多个SCSS文件中频繁使用Bootstrap混入和变量的场景。

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