Я пытаюсь выяснить рабочий процесс с помощью 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",
}