VueJS element not getting styled once built

Question

So I'm having problems with my styles not getting applied to a single Div element once the project has been built. The styles work fine in development but once the project has been built with NPM they are no longer applied.

The children of this element are getting styled correctly just not this element. When I inspect the compiled CSS file I can see the code is correctly there so I'm really not sure why it isn't getting applied.

The specific div that isn't getting styled is the #landing div.

Below is my component code, any help would be greatly appreciated.

<template>
<div id="landing" class="section">
   <div class="content">
      <h1>Hi, I'm Sam Roberts</h1>
      <p>I'm a Full Stack Web Developer, currently living in London.</p>
      <p>I currently work for <a href="https://nucreative.co.uk" target="_blank">NU Creative</a>, a design agency based at London Bridge.</p>
      <p>My current favourite web stack to work in is, <a href="https://vuejs.org/" target="_blank">VueJS</a>, <a href="https://www.djangoproject.com/" target="_blank">Django</a>, <a href="https://www.postgresql.org/" target="_blank">PostgreSQL</a> and <a href="https://www.nginx.com/" target="_blank">NGINX</a>. This site is currently built using VueJS.</p>
  </div>
  <div class="illustration">
      <img src="images/programming.svg" alt="Source -- https://undraw.co/illustrations" />
  </div>
</div>
</template>
<style scoped lang="scss">
$mobile-break: 768px;
div#landing {
    display: grid;
    position: relative;
    padding: 0 10%;
    grid-template-columns: 1fr 1fr;
    justify-items: center;
    align-items: center;
    height: calc(100vh - 80px);
    div.content {
        font-family: 'Montserrat', sans-serif;
        padding-right: 40px;
        h1 {
            font-size: 3vw;
            margin-bottom: 30px;
        }
        p {
            font-size: 1.5vw;
            line-height: 120%;
            margin-bottom: 30px;
        a {
            position: relative;
            color: #f75d5d;
            text-decoration: none;
            &::after {
                position: absolute;
                left: 0;
                width: 100%;
                height: 2px;
                background: #f75d5d;
                content: '';
                opacity: 0;
                -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
                -moz-transition: opacity 0.3s, -moz-transform 0.3s;
                transition: opacity 0.3s, transform 0.3s;
                -webkit-transform: translateY(-10px);
                -moz-transform: translateY(-10px);
                transform: translateY(-10px);
                bottom: 0;
                -webkit-transform: translateY(10px);
                -moz-transform: translateY(10px);
                transform: translateY(10px);
            }
            &:hover::after, &:focus::after {
                opacity: 1;
                -webkit-transform: translateY(0px);
                -moz-transform: translateY(0px);
                transform: translateY(0px);
            }
        }
    }
}
div.illustration {
    padding-left: 40px;
    img {
        width: 100%;
    }
}
@media screen and (max-width: $mobile-break) {
    grid-template-columns: 1fr;
    div.content {
        padding-right: 0;
        h1 {
            font-size: 7vw;
        }
        p {
            font-size: 5vw;
        }
   }
   div.illustration {
       padding-left: 0;
   }
}
}
</style>

EDIT: If you want to see a live version to inspect yourself go here

Answer 1

I actually went to your website and found the bug for you. So the problem appears to be the fact that sass-loader (by the time of writing) does not currently support local variable inside of Vue component.

So remove this $mobile-break variable from the <style> section (and assign the value directly on the media query).

<style scoped lang="scss">
  $mobile-break: 768px; <!-- Remove this -->

  div#landing {

Now, as a workaround if you want to keep the variable, try sharing it globally.

{
  test: /\.scss$/,
  use: [
    'vue-style-loader',
    'css-loader',
    {
      loader: 'sass-loader',
      options: {
        // you can also read from a file, e.g. `variables.scss`
        data: `$mobile-break: 768px;`
      }
    }
  ]
}