Не применяются стили node-sass?

Question

[Theobeliks]

Я хочу, чтобы форма входа выглядела как в примере, но в итоге она выглядит совершенно иначе. Пожалуйста, помогите мне понять причину. Стили node-sass не применяются.

Должно выглядеть примерно так:
Но выглядит так:

Вот мой код Login.js:

import React from 'react'
import loginImage from '../../assets/images/login.svg'

import './Auth.scss'
const Login = () => {
    return(
        <div id='auth-container'>
            <div id='auth-card'>
                <div id='image-section'>
                    <img src={loginImage} alt='Login'></img>
                </div>

                <div id='form-section'>
                    <h2>Welcome back</h2>

                    <form>
                        <div className='input-field mb-1'>
                            <input placeholder='Email'/>
                        </div>

                        <div className='input-field mb-2'>
                            <input placeholder='Password'/>
                        </div>

                        <button>LOGIN</button>
                    </form>

                    <p>Don't have an account? Register</p>
                </div>
            </div>
        </div>
    )
}

export default Login

Код Auth.scss:

@import "../../assets/scss/_variable.scss";

#auth-container {
    min-height: 100vh;
    background-color: $bg-main;

    #auth-card {
        display: flex;
        justify-content: center;

        &>div {
            display: flex;
            flex-direction: row;
            min-width: 500px;
            margin-top: 2.5rem;
            background-color: white;
            border-radius: 20px;

            #image-section {
                background-color: $bg-light;
                border-top-left-radius:  20px;
                border-bottom-left-radius: 20px;

                img {
                    max-height: 300px;
                    min-width: 100%;
                }
            }

            #form-section {
                min-width: 300px;

                h2 {
                    text-align: center;
                }

                form {
                    padding: 20px;

                    .input-field {
                        input {
                            height: 40px;
                            width: 100%;
                            box-sizing: border-box;
                        }
                    }

                    button {
                        width: 100%;
                        height: 30px;
                        background-color: $bg-main;
                        border: none;
                        color: white;
                        cursor: pointer;
                        font-weight: 600;
                    }
                }
            }
        }
    }
}

Answer 1

[Алексей Уколов]

Стили-то применяются, просто они у вас кривые. У вас получается селектор #auth-container #auth-card &>div #form-section, под который ничего не подпадает. Не нужно играться с вложенностью, сделайте хотя бы так:

#auth-container {
  min-height: 100vh;
  background-color: red;
}

#auth-card {
  display: flex;
  justify-content: center;

  &>div {
    display: flex;
    flex-direction: row;
    min-width: 500px;
    margin-top: 2.5rem;
    background-color: white;
    border-radius: 20px;
  }
}

#image-section {
  background-color: green;
  border-top-left-radius:  20px;
  border-bottom-left-radius: 20px;

  img {
    max-height: 300px;
    min-width: 100%;
  }
}

#form-section {
  min-width: 300px;

  h2 {
    text-align: center;
  }

  form {
    padding: 20px;

    .input-field {
      input {
        height: 40px;
        width: 100%;
        box-sizing: border-box;
      }
    }

    button {
      width: 100%;
      height: 30px;
      background-color: blue;
      border: none;
      color: white;
      cursor: pointer;
      font-weight: 600;
    }
  }
}