Block Preview not loading bootstrap variables Umbraco #help-with-umbraco

Block Preview not loading bootstrap variables

PascalEugster

10/06/2023, 8:07 AM

Hey everyone, i'm currently working with block preview from rickbutterfield. First of, awesome plugin! I'm facing a problem where my bootstrap css variables do not get loaded... And i dont know why. For the preview style im loading the default.min.css which gets generated with all the styles and there are also the defined varaiables. Did somebody already dealt with this problem?

PascalEugster

10/06/2023, 8:09 AM

They are defined in my default.min.css

PascalEugster

10/06/2023, 8:09 AM

https://cdn.discordapp.com/attachments/1159763771661750292/1159764267193606235/message.txt?ex=653235a4&is=651fc0a4&hm=eea6ccfd9356575c738bfb155020aae74674c823c2be91c99eb9b4e8d2950965&

rickbutterfield

10/06/2023, 8:30 AM

I know that @Dean Leigh has been working with both BlockPreview and Bootstrap! If my memory serves right, because the previews are loaded from the Shadow DOM,

:root

doesn't mean anything in the CSS and needs to be replaced with

:host

PascalEugster

10/06/2023, 8:34 AM

That was absoulutely it! Thanks so much Rick for this hint!

Copy code

SCSS
@import 'bootstrap'

:root, :host { @extend :root; }

This did the trick for me and was discussed in: https://github.com/twbs/bootstrap/issues/36688#issuecomment-1178522306

PascalEugster

10/06/2023, 8:44 AM

@rickbutterfield The last thing that won't work for me are the fonts i defined. Ive created a fonts.scss which i've imported at the very top. In the frontend it works but not in the preview. The font face is defined as following:

Copy code

scss
@font-face {
  font-family: 'EuclidCircularA-Light';
  src: url('../fonts/EuclidCircularA-Light.eot');
  src: url('../fonts/EuclidCircularA-Light.eot?#iefix') format('embedded-opentype'),
  url('../fonts/EuclidCircularA-Light.woff2') format('woff2'),
  url('../fonts/EuclidCircularA-Light.woff') format('woff'),
  url('../fonts/EuclidCircularA-Light.ttf') format('truetype'),
  url('../fonts/EuclidCircularA-Light.svg#EuclidCircularA-Light') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

PascalEugster

10/06/2023, 8:47 AM

The fonts are beeing moved to the wwwroot/static folder

rickbutterfield

10/06/2023, 8:51 AM

Same kind of thing, you would likely have to include fonts as part of a

package.manifest

so they're loaded at the global backoffice level. I think @Dean Leigh has an example of this

rickbutterfield

10/06/2023, 8:51 AM

Also have a look at this! https://www.rocksolidknowledge.com/articles/how-to-load-a-google-font-for-umbraco-block-grid-previews

38 Views

Previous Next