Иван

у тебя в конфиге стоит exclude: path.resolve(__dirname, 'src/app'), - это означает что для файлов типа test: /\.(css|sass|scss)$/, в указанной папке у тебя не будет срабатывать данное правило

В ошибке мы видим путь как раз к файлу, который лежит в исключенной папке:
ERROR in ./src/app/app.component.scss 1:3

поменяй exclude на include, либо совсем убери (зависит от того, есть ли еще в других папках используемые файлы css|sass|scss)

довольно частая задача во фронтенде - обычно решается совместно с дизайнерами, тк ориентироваться на соседние блоки - это всегда ущерб для текущего элемента (при названии фильма в одну строчку - он в любом случае будет отличаться от названия в 2 и более строки), поэтому оптимальным решением всегда считалось следующее:
для заголовка всегда выделяем высоту в 2 строки - все что больше 2х строк уходит в троеточие

добавляем разделитель по нужному индексу:

import { Fragment } from 'react'; // подключаем react fragment
....
// перед 3-им индексом, вставляем разделитель, индексы нумеруются от 0
render() {
  return (
    <div>
      {
        this.props.data.map((item, index) => {
          console.log('item', item);
          return (
            <Fragment key={item.id}>
              {index === 3 && ( 
                <div>
                  разделитель
                </div>
              )}
              <div key={item.id}>
                {item.title}
                {item.round.map((r) => {
                  console.log('r', r);
                  return (
                    <div key={r.id}>
                      {r.total}
                    </div>
                  )
                })}
              </div>
            </Fragment>
          )
        })
      }
    </div>
  )
}

var form = document.forms.mess;
var show = false; // флаг показа ошибки
var msg = form.username;

form.addEventListener('submit', function(e){
   e.preventDefault();

msg.addEventListener('keydown', function(e){

     if(e.keyCode === 13) {
        if (this.value !== '') {
           console.log(this.value); 
           this.value = '';
           show = false; // тут надо удалить блок с ошибкой и выключить флаг
        } else {
              alert('Пустое поле - заполните его!');
              if (show) return; // если уже показана, то ничего не делаем
              show = true; // включаем флаг о том что показано сообщение
              var error = document.createElement('p');

                 error.innerHTML = 'Ошибка ввода!';
                 error.className = 'error';
                 form.append(error);
                 form.previousElementSibling.remove('error');
        }

     }
});
});

удаление должно проходить в 2 этапа:

1. помечаешь удаляемый элемент спец флагом "isDeleted" (в этом состоянии средствами css запускаешь анимацию исчезновения)
2. по окончании анимации удаляешь элемент из state полностью

...
onDeleteItem(index) {
  const users = this.state.users;
  users[index].isDeteted = true;
  this.setState({
    users,
  });
  setTimeout(() => {
    users.splice(index, 1);
    this.setState({
      users,
    });
  }, 300);
}
...
{this.state.users.map((user, index) => (
  <UserItem 
    className={user.isDeteted ? 'class-for-deleted' : ''} 
    onDelete={this.onDeleteItem.bind(this, index)} 
  />
))}
...

уровень senior: в данном механизме асинхронное изменение state, поэтому для стабильно работающего кода необходимо добавить проверку, что процесс удаления закончился (чтобы не было коллизий между несколькими быстрыми кликами "удалить"), а так же на существование текущего компонента (что он не размонтировался из dom-дерева)