嵌套样式不适用于我组件的样式

Question

在我的Nuxt应用程序中，我具有标准LESS/SCSS语法的嵌套样式。非常简单的内容，但浏览器无法理解：

<style scoped>
.telephone {
  display: flex;
  align-items: center;
  color: white;

  .icon-telephone {
    margin-right: 1em;
    transform: rotate(90deg);
    width: 20px;
  }
}
</style>

在Chrome的控制台中，我从字面上看到了这一点：

.telephone {
    .icon-telephone {: ;
    margin-right: 1em;
    transform: rotate(90deg);
    width: 20px;
    }: ;
}

..从.icon-telephone {: ;到}: ;的所有内容都被删除了。

这是怎么回事？

Answer 1

嗨，您应该检查以下内容：

https://nuxtjs.org/faq/pre-processors/

安装上位处理器并使用lang属性。

<style lang="scss">
.red {
  color: red
}
</style>