#help-with-umbraco
Block Preview not loading bootstrap variables
# help-with-umbraco
p
pascaleugster
10/06/2023, 8:07 AMHey 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?
They are defined in my default.min.css
r
rickbutterfield
10/06/2023, 8:30 AMI know that @deanleigh has been working with both BlockPreview and Bootstrap! If my memory serves right, because the previews are loaded from the Shadow DOM,
:root:hostp
pascaleugster
10/06/2023, 8:34 AMThat was absoulutely it! Thanks so much Rick for this hint!
Copy code
SCSS
@import 'bootstrap'
:root, :host { @extend :root; }@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;
}The fonts are beeing moved to the wwwroot/static folder
r
rickbutterfield
10/06/2023, 8:51 AMSame kind of thing, you would likely have to include fonts as part of a
package.manifestAlso have a look at this! https://www.rocksolidknowledge.com/articles/how-to-load-a-google-font-for-umbraco-block-grid-previews