Элемент VueJS не получает стиль после сборки

Question

Так что у меня проблемы с тем, что мои стили не применяются к одному элементу Div после создания проекта. Стили отлично работают при разработке, но после того, как проект был построен с использованием NPM, они больше не применяются.

Дочерние элементы этого элемента корректно оформляются, но не этот элемент. Когда я проверяю скомпилированный файл CSS, я вижу, что код там правильно, поэтому я действительно не уверен, почему он не применяется.

Конкретный div, который не получает стилизацию - это #landing div.

Ниже приведен код моего компонента, любая помощь будет принята с благодарностью.

<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>

РЕДАКТИРОВАТЬ: Если вы хотите увидеть живую версию, чтобы проверить себя, перейдите здесь

Answer 1

Я на самом деле зашел на ваш сайт и обнаружил ошибку для вас.Таким образом, проблема заключается в том, что sass-loader (на момент написания) в настоящее время не поддерживает локальную переменную внутри компонента Vue.

Поэтому удалите эту переменную $mobile-break из раздела <style> (и назначьте значение непосредственно в медиа-запросе).

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

  div#landing {

Теперь, в качестве обходного пути, если вы хотите сохранить переменную, попробуйте общий доступ к ней .

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