search

bestguy / sveltestrap

Bootstrap 4 & 5 components for Svelte
https://sveltestrap.js.org
MIT License
1.31k stars 183 forks source link

Can I try CSS Grid (Bootstrap 5.1.0, experimental) with Sveltestrap? #392

Closed akauppi closed 3 years ago

akauppi commented 3 years ago

I'd like to use this:

https://getbootstrap.com/docs/5.1/layout/css-grid/

Initializing happens by:

CSS Grid is opt-in. Disable the default grid system by setting $enable-grid-classes: false and enable the CSS Grid by setting $enable-cssgrid: true. Then, recompile your Sass.

Problem:

Those variables are Sass, and Svelte doesn't know it by default. I added this:

<style lang="sass">
  // Favour the (experimental) CSS Grid based engine -> https://getbootstrap.com/docs/5.1/layout/css-grid/
  $enable-grid-classes: false
  $enable-cssgrid: true
</style>

...but it still wants a precompiler, I think. Actual error is:

[watch] [!] (plugin svelte) ParseError: Identifier `deep` is expected
[watch] src/App.svelte
[watch] 12: 
[watch] 13: <style lang="sass">
[watch] 14:   // Favour the (experimental) CSS Grid based engine -> https://getbootstrap.com/docs/5.1/layout/css-grid/
[watch]        ^
[watch] 15:   $enable-grid-classes: false
[watch] 16:   $enable-cssgrid: true

A small advice on how to enable Sass with Svelte (or does it even make sense) would be appreciated.

bestguy commented 3 years ago

Hi, it makes sense, however I've personal not done this. I think you'll need to add scss preprocessor support, then you'll need to import from bootstrap's scss directory.

For the first, please look at: https://daveceddia.com/svelte-with-sass-in-vscode/

akauppi commented 3 years ago

Closing this.

Preprocessor is indeed necessary, but I'll use raw HTML Grid, instead.

Would be nice, if Sveltestrap supports the opt-in CSS Grid, at some point. :)