Svelte - Sveltestrap - Bootswatch - SASS variables

Question

I am evaluating Svelte with Bootstrap/Sveltestrap and a Bootswatch theme.

I need to support an offline use case, which means Bootswatch's fonts can't be loaded from google via a CDN.

So i configured svelte-preprocess and sass, but when compiling my app.scss I get this error:

[plugin:vite:css] expected ")".
  ╷
9 │   @import url(../node_modules/.pnpm/[email protected]/node_modules/bootswatch/dist/lumen/$web-font-path);
  │               ^
  ╵
  node_modules/.pnpm/[email protected]/node_modules/bootswatch/dist/lumen/_bootswatch.scss 9:15  @import
  src/app.scss 5:9                                                                              root stylesheet

app.scss

$web-font-path: false;

@import 'bootswatch/dist/lumen/_variables.scss';
@import 'bootstrap/scss/bootstrap.scss';
@import 'bootswatch/dist/lumen/_bootswatch.scss';

main.ts

import './app.scss';
import App from './App.svelte';

const app = new App({
  target: document.getElementById('app'),
})

export default app;

Based on my understanding of bootswatch#573 & bootswatch.com/help setting $web-font-path: false should disable the @import in _bootswatch.scss, but that obviously isn't the case. Somehow $web-font-path is not falsey inside _bootswatch.scss.

The top of _bootswatch.scss

$web-font-path: "https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,300;0,400;0,700;1,400&display=swap" !default;
@if $web-font-path {
  @import url($web-font-path);
}

Any one have any ideas? Is svelte somehow mangling the SASS variable? Trying to maintain the ability to customize the theme via SASS variables, and disable external font loading.

Answer 1

I fixed this for myself by changing the code in _bootswatch.scss to be:

$web-font-path: "https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400&display=swap" !default;
@if #{$web-font-path} {
  @import url(#{$web-font-path});
}

It was clear from the error message that it was expanding the variable path rather than resolving it to a string, so I adjusted the library source based on this answer.

I also had to use an empty string rather than false to invoke the bypass.

I'm not really sure why this has happened and why the SASS tools behave this way for me and OP, but not for other people.