Как получить выходные данные от node-sass для автоматического префикса postcss

Question

Как мне использовать выходные данные node-sass для прохождения через autocrepreixer postcss.

Я не собираюсь использовать какой-либо веб-пакет или глоток.

Я просто использую cli из узловых пакетов

Это мой текущий скрипт npm

node-sass --watch ./src/scss --output ./dist/assets/css | postcss ./dist/assets/css/app.css --use autoprefixer --output ./dist/assets/css/app-dist.css

Все работает, только если я вывожу в ту же папку с другим именем. Но это не работает, если я хочу вывести на то же имя.

Таким образом, поток scss -> css -> autoprefixer -> compiled.css

Answer 1

Проблема обсуждается здесь: https://medium.com/@rostyslavbryzgunov/problem-of-watching-scss-f5c4225802fb Автор этого сообщения создал пакет NPM для ее решения: https://github.com/kottenator/node-sass-watcher

Я не пробовал этот пакет, так как он не обновлялся уже три года.

Я также долгое время боролся с этой, казалось бы, простой проблемой использования node-sass и postcss (с autoprefixer), и я много исследовал и пробовал. В конце концов, я просто согласился запустить node-sass в режиме просмотра и записать файлы css во временный каталог, который postcss просматривает, а затем записывает файлы css (включая префиксы) в каталог dist. Если вы не используете временный каталог и позволяете postcss наблюдать, а затем перезаписывать файлы css, которые генерирует node-sass, вы попадете в бесконечный цикл, где postcss перезаписывает файл, который он просматривает, снова и снова. Вы можете обойти это, если используете опцию --poll в postcss, но это также оказалось ненадежным (иногда у меня все еще бывают бесконечные циклы), и это замедляет процесс сборки.

Единственный надежный способ обойти это - не использовать node-sass и postcss в режиме просмотра, а использовать, например, chokidar для просмотра файлов sass, а затем один раз запустить node-sass, а затем postcss. (Вот пример: https://github.com/hellobrian/sass-recipes/tree/master/node-sass) Тогда основным недостатком является то, что это значительно медленнее, вероятно, потому что node-sass должен запускаться каждый раз вместо продолжайте работать в режиме часов. (На быстрых машинах это может быть нормально, но на моем MacBook Pro 2013 года это добавляет 2-3 секунды после каждого изменения в файле sass.)

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

Answer 2

Я думаю, что нет доступных api node-sass, которые позволили бы вам сделать это.

В итоге я запустил node-sass-chokidar и postcss параллельно с промежуточным временным файлом, созданным node-sass, он не очень красивый, но он выполняет свою работу:

node-sass-chokidar ./root.scss ./tmp/root.css --watch --source-map-embed --source-map-root file://${PWD}/ &
P1=$ postcss -w ./tmp/root.css -o ./a-very-long-path-lalala/root.css &
P2=$! wait $P1 $P2

Это позволяет вам завершить как с ctrl+c, Также вы можете переместить ваши скрипты во внешний файл, используя, например, scripty, чтобы скрипты package.json оставались достаточно короткими.

Также вы можете рассмотреть возможность использования gulp или grunt.