After building my Vue/Nuxt app, I noticed that certain component styles are not being applied.
In the DEVELOPMENT environment, the styles appear as expected. However, once deployed, they seem to disappear.
All other component styles render properly.
Dev Render:
https://i.stack.imgur.com/gJkfP.png
Prod Render:
https://i.stack.imgur.com/vX9Y9.png
The styles in the component are defined using the <style> tag.
<style lang="scss">
.listing-wrapper {
display: grid;
grid-template-columns: 1fr;
@media (min-width: 1024px) {
grid-template-columns: 50vw 50vw;
}
}
.listing-intro {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 2;
@media (min-width: 1024px) {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 2;
}
}
.listing-map {
position: relative;
background-color: #cccccc;
text-align: center;
align-items: center;
justify-content: center;
@media (min-width: 1024px) {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 2;
}
.explore-map {
width: 100%;
height: 100%;
> div {
min-height: 50vh;
height: auto;
}
}
}
</style>
The template:
<template>
<div>
<layout-hero :pageRef="pageContent[0].id"></layout-hero>
<main class="main listing-page">
<h1 v-html="pageContent[0].title.rendered + ' around Karratha'"></h1>
<div class="listing-wrapper" v-if="pageContent[0].id != 68">
<section v-if="pageContent[0].content.rendered" class="listing-intro listing-content-block" v-html="pageContent[0].content.rendered"></section>
<section class="listing-map">
<layout-map :mapVersion="'activity-map'" :mapCategory="pageContent[0].title.rendered" :zoomVal="7"></layout-map>
</section>
</div>
<div v-else>
<div class="listing-wrapper">
<section v-if="pageContent[0].content.rendered" class="listing-intro listing-content-block full-width" v-html="pageContent[0].content.rendered"></section>
</div>
</div>
</main>
</div>
</template>
Could the issue be related to the placement of the class within the same div as the v-if?