Блог

Главная - Вопросы по программированию - Получение неописуемой ошибки синтаксического анализа CSS при попытке запустить create-react-app build

Получение неописуемой ошибки синтаксического анализа CSS при попытке запустить create-react-app build

#css #node.js #reactjs #create-react-app

#css #node.js #reactjs #create-react-app

Вопрос:

Я использую довольно простой файл CSS для оформления моего приложения react, но когда я пытаюсь запустить npm run build его, я получаю ошибку синтаксического анализа в строке 1, столбец 35.

Это та часть, которая вызывает проблему:

 @keyframes jiggleLink {
  0%, 100%{
    transform: translate(0px, 0px);
  }
  25%{
    transform: translate(var(--jiggle-skew), 0);
  }
  75%{
    transform: translate(calc(var(--jiggle-skew)*-1), 0);
  }
}

Почему это может вызывать ошибки?

Комментарии:

1. Что build делает скрипт?

2. @Anastazy Это встроенная функция create-react-app, поэтому idk

Ответ №1:

Проблема заключается в этом конкретном фрагменте вашего окончательного transform правила : )*-1 . Вам необходимо отделить оператор от множителя, чтобы компилятор правильно его проанализировал, поскольку вы используете отрицательное значение, которое также может быть интерпретировано как - оператор.

Простое изменение его на )* -1 сделало бы свое дело, однако в интересах согласованности с тем, как предполагается использовать функцию CSS calc (в браузере произойдет сбой с недопустимым синтаксисом, когда операторы or - не окружены пробелами), это, вероятно, лучше:

 transform: translate(calc(var(--jiggle-skew) * -1), 0);