I've noticed a strange issue with my CSS styling.
When I first load or refresh the page, no CSS is applied. However, I found that if I make a change to the style tag - such as adding or removing 'scoped' - the CSS suddenly applies correctly.
My setup includes Nuxt 3.8.1 and I'm using sass for styling.
I've searched online but haven't been able to find anyone else experiencing this exact problem.
Below is an example of the code I'm working with:
<style lang="scss">
@font-face {
font-family: 'Basil Regular';
src: url('~/public/Basil-Regular.ttf') format('truetype'),
url('~/public/Basil-Regular.otf') format('opentype');
font-weight: normal;
font-style: normal;
}
.indexMain{
margin-top: 0%;
height:80vh;
background-image: url('/house3.png');
background-size: cover;
background-position: center;
.headings{
margin-left: 5%;
font-size: 2.5rem;
h1 {
font-family: 'Basil Regular';
margin-top: 0%;
margin-bottom: 0%;
color: white;
}
h3 {
font-family: 'Basil Regular';
margin-top: -1%;
margin-bottom: 0%;
color: white;
}
.first-h1{
padding-top: 7%;
}
.second-h1{
padding-top: 2.5%;
}
}
}
</style>
<template>
<div className="indexMain">
<div className="headings">
<h1 className="first-h1">Craftsmanship</h1>
<h3>without compromise</h3>
<h1 className="second-h1">Efforts </h1>
<h3>without boundaries</h3>
</div>
</div>
</template>