Postcss-import — как заинлайнить стили?

Question

[Олег Смирнов]

С postcss практически не знаком, нужна помощь. Суть проблемы: плагин postcss-import не инлайнит подключаемые файлы.
Фрагмент gulpfile.js:

var gulp = require("gulp"),
      cssimport = require("postcss-import"),
      postcss = require("gulp-postcss");

gulp.task('styles', gulp.series(styles));

function styles() {
	return gulp.src('src/assets/css/app.css')
		.pipe(postcss(cssimport))
		.pipe(gulp.dest('dist/assets/css'));
}

app.css перед сборкой:

@import 'blocks/button/button.css';

app.css после сборки:

@import 'blocks/button/button.css';

Что я не так делаю?

Comments

[iBird Rose]

ты usage https://github.com/postcss/postcss-import#usage читал? там gulpfile совсем не такой

[sim3x]

Делай на том с чем знаком

[Олег Смирнов]

iBird Rose: там нет инструкций по настройке для gulp, что-то вы путаете.

[Олег Смирнов]

sim3x: естественно, я могу делать на том, с чем знаком. Но если бы я этого хотел, то не обращался сюда, верно? Есть замечательный gulp-cssimport, который работает, но также есть отличные вещи для postcss, например, cssnext. Я просто хочу объединить все операции над стилями в одной экосистеме.

[sim3x]

Хельг Волков:
0. В ццснексте нет ничего замечательного, в пост - также
1. Если тебе шашечки, то лучше разобраться самому
2. Даже после настройки, такая екосистема будет нужна только тебе

[iBird Rose]

Хельг Волков: лол) ты тока что ответил на свой вопрос) этот плгин не для gulp) а ты его пытаешься запустить через gulp. ясен пень он не будет работать. ищи такую же штуку для gulp. к примеру вот https://www.npmjs.com/package/gulp-cssimport

[Danila]

iBird Rose: gulp-postcss позволяет запускать postcss плагины из галпа
Хельг Волков: постцсс принимает массив из плагинов, попробуй обернуть свой cssimport в []

[Олег Смирнов]

Данила: не помогает, по факту у меня там и есть массив из 3-х пока что плагинов. Я просто лишние убрал.

Answer 1

[Олег Смирнов]

Вопрос неактуален. Дело было в другом плагине (postcss-csscomb), который блокировал работу импорта. Скрипт также не работал при единственном оставленном postcss-import, но, скорее всего, виноват был кеш - через какое-то время все заработало как надо. А вместо postcss-csscomb поставил csslint+cssfmt.

Answer 2

[Константин Величко]

Вы неправильно подключили плагин. Попробуйте так

…
.pipe(postcss([ cssimport() ]))
…