Bdtjtk

I have just noticed that my Vue/Nuxt app is not applying some component styles following build.

The styles are applied as expected in DEVELOPMENT, but once deployed, they don't appear.

Other styles within the component are rendered fine.

Dev Render:

Prod Render:

The styles are applied in the component 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>

Is it related to the class being on the same div as the v-if?

After stepping away for a day after two weeks of solid work I discovered the issue was due to a style coming through from the map component that was overriding the parent component style.

I am still getting differences between local dev and live production though, even after clearing browser cache and purging the app cache.

UPDATE: The issue was due to scoped being included on the map components style block. It is now working as expected.

Thank you for all your suggestions.