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>

编辑：如果您想查看实时版本来检查自己，请转到 here

Answer 1

我实际上去了您的网站并为您找到了 错误。所以问题似乎是sass-loader（在撰写本文时）目前不支持 Vue 组件内部的局部变量。

所以从<style> 部分中删除这个$mobile-break 变量（并直接在媒体查询上分配值）。

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

  div#landing {

现在，作为一种解决方法，如果您想保留该变量，请尝试 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;`
      }
    }
  ]
}