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

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

因此，请从$mobile-break部分中删除此<style>变量（并直接在媒体查询中分配值）。

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

VueJS元素一旦构建就无法样式化

1 个答案: