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/bootswatch@5.2.0/node_modules/bootswatch/dist/lumen/$web-font-path);
  │               ^
  ╵
  node_modules/.pnpm/bootswatch@5.2.0/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.

Svelte - Sveltestrap - Bootswatch - SASS variables

0 Answers0