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

Yom T. · Accepted Answer · 2019-01-22 13:43:24Z

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;`
      }
    }
  ]
}

answered Jan 22, 2019 at 13:43

Yom T.

9,1982 gold badges35 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

samroberts707 Over a year ago

Hi @jom, Thanks for finding that. I have checked and this was the cause and have now removed the SASS variable. I will look in to your workaround a little later.

Yom T. Over a year ago

No problem, glad it helped. :)

Collectives™ on Stack Overflow

VueJS element not getting styled once built

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related