Css Sass在react应用程序中处理错误

无法真正解释，但一旦你看到sass和css，你就会知道我在说什么

我的俏皮话：

@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,500;0,600;0,700;1,500;1,600;1,700&family=Montserrat+Alternates:ital,wght@0,500;0,600;0,700;1,500;1,600;1,700&display=swap')

$font-primary: 'Barlow', sans-serif
$font-secondary: 'Montserrat Alternates', sans-serif

.App
    background-color: #ffffff
    font-family: $font-secondary
    width: 100%
    min-height: 100vh


.Home, .Products, .About
    min-height: 100vh
    font-family: $font-primary
    text-align: center
    display: grid
    align-items: center
    grid-template-columns: 1fr 8fr 1fr


.SwitchTab 
    color: #ffffff
    padding: 50px 0
    background-color: green
    font-family: $font-secondary

我的css（已编译）：

我以前使用过sass和scss，但这从未发生在我身上。有人知道为什么或者如何解决这个问题吗？

试试看

.App
    background-color: #ffffff
    font-family: #{$font-secondary}
    width: 100%
    min-height: 100vh


.Home, .Products, .About
    min-height: 100vh
    font-family: #{$font-primary}
    text-align: center
    display: grid
    align-items: center
    grid-template-columns: 1fr 8fr 1fr


.SwitchTab 
    color: #ffffff
    padding: 50px 0
    background-color: green
    font-family: #{$font-secondary}

试一试

---

根据您在Odin Project Discord频道上发布的代码片段，这似乎是由于您在这里的问题中遗漏了代码片段的缩进：

删除标识后：

---

根据您在Odin Project Discord频道上发布的代码片段，这似乎是由于您在这里的问题中遗漏了代码片段的缩进：

删除标识后：

---

为将来看到这一点的人发表评论。问题来自vim，缩进是一个制表符+1空间，这是导致问题的原因。我把它改为只有两个空格，现在它可以完美地工作了。这就是我在vimrc中添加的内容：

set shiftwidth=2 set tabstop=2

为将来看到这一点的人提供评论。问题来自vim，缩进是一个制表符+1空间，这是导致问题的原因。我把它改为只有两个空格，现在它可以完美地工作了。这是我添加到vimrc中的内容：

set shiftwidth=2 set tabstop=2

.App
    background-color: #ffffff
    font-family: #{$font-secondary}
    width: 100%
    min-height: 100vh


.Home, .Products, .About
    min-height: 100vh
    font-family: #{$font-primary}
    text-align: center
    display: grid
    align-items: center
    grid-template-columns: 1fr 8fr 1fr


.SwitchTab 
    color: #ffffff
    padding: 50px 0
    background-color: green
    font-family: #{$font-secondary}