Search code examples
bootstrap-4sasssveltevitesveltekit

Why does SvelteKit require to include dependent scss files each time instead requiring them once, globally?

I'm trying to build a project using SvelteKit and Bootstrap.

After including all Bootstrap related scss files in the +layout.css file, I receive an error from my custom.scss style file saying:

[sass] Undefined mixin.

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

Here is my +layout.svelte file:

<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>

I've managed to identify the fact that I can get around by importing bootstrap/scss/mixins inside my custom.css file.

Why do I have to include again the @import "bootstrap/scss/mixins" line in my custom.scss file in order to make it work, since the file is already included in bootstrap/scss/bootstrap.scss which is included in the +layout.svelte file?

P.S. - I have enabled vitePreprocess for SvelteKit.

I have previously used Laravel Mix which worked as intended. Could someone explain to me why this behaviour in SvelteKit?

Solution

  • An import in script is an isolated inclusion of the styles, they do not "communicate". As @include is something that has to happen in the preprocessing, importing the various files separately will not work.

    You should be able to create e.g. a bundle.scss that internally imports the files, that way they should all be processed together.

    Otherwise there is the option to not import in the <script> but rather in <style lang="scss"> using SASS/CSS import mechanisms instead. (There you may need to put everything in a :global block to prevent scoping.)