为什么 SvelteKit 每次都需要包含依赖的 scss 文件，而不是全局需要一次？

Question

我正在尝试使用 SvelteKit 和 Bootstrap 构建一个项目。

在+layout.css文件中包含所有 Bootstrap 相关的 scss 文件后，我从我的custom.scss样式文件中收到一条错误消息：

[sass] Undefined mixin.

53 │ ┌         @include media-breakpoint-up(sm) {
54 │ │             ...
65 │ └         }
   ╵
  src/lib/css/custom.scss 53:9  root stylesheet

这是我的+layout.svelte文件：

<script>
    //scss
    import 'bootstrap/scss/bootstrap.scss'
    import 'bootstrap-icons/font/bootstrap-icons.scss'
    import '$lib/css/custom.scss'

    //js
    import 'bootstrap/dist/js/bootstrap.bundle'
</script>

<slot></slot>

我已经设法确定我可以通过在我的custom.css文件中导入bootstrap/scss/mixins来解决这个问题。

为什么我必须在我的custom.scss文件中再次包含@import "bootstrap/scss/mixins"行才能使其工作，因为该文件已经包含在bootstrap/scss/bootstrap.scss中，它包含在+layout.svelte文件？

PS - 我已经为 SvelteKit 启用了vitePreprocess 。

我以前使用过 Laravel Mix，它按预期工作。 有人可以向我解释为什么 SvelteKit 中有这种行为吗？

Answer 1

script中的导入是 styles 的孤立包含，它们不“通信”。 由于@include是预处理中必须发生的事情，因此单独导入各种文件将不起作用。

您应该能够创建一个内部导入文件的bundle.scss ，这样它们应该一起处理。

否则，可以选择不在<script>中导入，而是在<style lang="scss">中使用 SASS/CSS 导入机制。 （您可能需要将所有内容放在一个:global块中以防止范围界定。）