css - Sass 在 React 应用程序中被错误处理

Question

无法真正解释，但是一旦您看到 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（编译）：

.App {
  background-color: #ffffff;
  background-color-font-family: "Montserrat Alternates", sans-serif;
  width: 100%;
  min-height: 100vh; }

.Home, .Products, .About {
  min-height: 100vh;
  min-height-font-family: "Barlow", sans-serif;
  text-align: center;
  display: grid;
  align-items: center;
  grid-template-columns: 1fr 8fr 1fr; }

.SwitchTab {
  color: #ffffff;
  padding: 50px 0;
  background-color: green;
  background-color-font-family: "Montserrat Alternates", sans-serif; }

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

标签： cssreactjssass

Answer 1

尝试

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