Блог

Итак, в настоящее время я настраиваю проект только с postcss и полностью удаляю scss. Одна вещь, с которой я борюсь, — это отсутствие каких-либо сообщений об ошибках при сбое синтаксиса.

Так, например, я добавил плагин precss, и когда я неправильно пишу переменную:

 $somevar: #000;
.body{
  color:$oopsvar;
}
  

Очевидно, что в SCSS это выдаст ошибку и сообщит мне, что $oopsvar не существует. Но он просто анализирует его и возвращает:

 .body{
  color:$oopsvar;
}
  

Что, очевидно, недопустимо. Я добавил postcss-reporter, postcss-devtools и даже попытался посмотреть, есть ли какие-либо правила в stylelint, которые могли бы показать ошибку, но ничего.

Теперь я не уверен, что это просто проблема с плагинами, такими как precss, или что-то в целом, чего мне не хватает в postcss. Как другие люди отлаживают postcss, или люди просто проверяют браузер?

Итак, я провел некоторое расследование и пообщался с postcss gitter

Существует встроенный способ отображения предупреждений и ошибок в postcss, однако из-за подхода плагина его реализация зависит от отдельных создателей плагинов. Проблема, с которой я столкнулся с precss, которая не поддерживается, заключалась в том, что они не отображали никаких предупреждений. Мы больше продвинулись в сторону cssnext, который хорошо поддерживается, хотя синтаксис немного отличается, поскольку он использует предлагаемые переменные css, а не синтаксис scss.

Вам также понадобится postcss-reporter для получения предупреждений и ошибок, если они реализованы.

Если вы хотите найти все ошибки, вам следует использовать linter . Stylelint будет отличным выбором (на основе PostCSS).

PostCSS используется во многих инструментах CSS. Некоторые из этих инструментов используют пользовательский синтаксис. Вот почему PostCSS может анализировать пользовательский синтаксис ( $somevar: #000; анализируется как $somevar свойство).