Подтвердить что ты не робот

Смотрите несколько файлов css с postcss и выведите пакет bundle.css

Я пытаюсь выяснить рабочий процесс с помощью postcss. Мне нужно иметь частичные части css в одной папке, смотреть их и выводить файл css-пакета. Файл css пакета должен содержать файл base.css вверху.

postcss имеет флаг --watch и может просматривать несколько файлов, но может выводить только несколько файлов, а не файл css пакета. Я могу использовать cat, чтобы объединить все файлы и использовать stdin для их отправки в postcss. Но я не могу запустить команду cat из postcss.

Структура моих файлов может выглядеть так:

partials/
    |_one.css
    |_two.css
styles/
    |_base.css
    |_bundle.css

Как я, используя npm, упорядочить мой раздел script, чтобы использовать команды CLI для достижения моей цели?

Моя основная проблема заключается в том, чтобы выяснить, как выполнить оркестр на этапах сборки без одного шага, блокирующего следующий. Ссылка на рабочий рабочий пример будет отличной!

EDIT Я получил решение, но он очень субоптимален, поскольку он не может использоваться с исходными картами, не может иметь глобальных переменных и является двухэтапным процессом. Но я опишу его здесь в надежде, что кто-то может предложить лучший подход.

Используя следующую структуру:

build/
    |_stylesheet/
        |_default.css (final processed css)
partials/
    |_one.css
    |_one.htm (html snippet example)
    |_two.css
    |_two.htm (html snippet example)
styles/
    |_base.css
    |_bundle/ (css files from partial/ that is partly processed)
        |_one.css
        |_two.css
    |_master.css (import rules)

У меня есть двухэтапный процесс в моем package.json. Сначала я уверен, что у меня есть папка стилей/пакетов (mkdir -p), а затем я запускаю nodemon, чтобы посмотреть файлы css в partials/. Когда происходит изменение, nodemon запускает npm run css:build.

css:build обрабатывать css файлы в partials/и выводить их в styles/bundle/(помните, что я не знаю, как смотреть несколько файлов и выводить один связанный файл).

После запуска css:build npm запускает postcss:build, который обрабатывает файл master.css, который @import css файлы из styles/bundle/. Затем я вывожу ( > ) обработанный контент из stdout для сборки /stylesheet/default.css.

{
    "css": "mkdir -p styles/bundle && nodemon -I --ext css --watch partials/ --exec 'npm run css:build'",
    "css:build": "postcss --use lost --use postcss-cssnext --dir styles/bundle/ partials/*.css",
    "postcss:build": "postcss --use postcss-import --use postcss-cssnext --use cssnano styles/master.css > build/stylesheet/default.css",
}
4b9b3361

Ответ 2

Возможно, вам стоит использовать webpack вместо этого, чтобы создать один файл css и другие ресурсы, которые также имеют флаг часов. Он очень эффективен, и вам не нужно вручную перестраивать все время после изменений в ресурсах/файлах.