Реакция сборки не удалась, когда sass использует calc и var вместе

Question

Я использую create-реакции-приложение для создания своего приложения, и оно работает без каких-либо ошибок или предупреждений, когда я запускаю его в режиме разработки.Однако, когда я использую calc и var вместе в sass, я получаю ошибку сборки, когда я запускаю npm, запускаю сборку на терминале.

transform: translate(calc((var(--i) -1)*-100%));

Когда я раскомментирую упомянутый код, сборка не завершается, поэтому яЯ предполагаю, что именно в этом проблема.

Это довольно странно, потому что работает отлично, когда я запускаю npm start.

Сообщение об ошибке следующее.

yarn run v1.16.0
$ react-scripts build
Creating an optimized production build...
Failed to compile.

./src/styles/core.scss
ParserError: Syntax Error at line: 1, column 31


error Command failed with exit code 1.

Answer 1

Внутри sass переменные объявляются с $ вместо var (- i).Также вы должны отделить числа от оператора + пробелом.вместо -1 вы должны написать - например, 1.проверьте документы о calc функции

Также вы можете проверить эту документацию о числовых операторах в sass. sass числовые операторы

надеюсь, что это поможет.

Answer 2

Это работает, когда calc () включен для вычисления вычитания и когда пробелы включены между операторами.

transform: translate(calc(calc((var(--i) - 1)) * -100%));