Пытаюсь настроить postcss

gulpfile.js

@@ -5,7 +5,9 @@ const fs = require('fs');
 const gulp = require('gulp');
 const gulpSequence = require('gulp-sequence');
 const postcss = require('gulp-postcss');
+const atImport = require("postcss-import")
 const customProperties = require("postcss-custom-properties")
+const autoprefixer = require("autoprefixer")
 const notify = require('gulp-notify');
 const gulpIf = require('gulp-if');
 const debug = require('gulp-debug');
@@ -22,6 +24,13 @@ let lists = getFilesList(pjson.configProject);
 console.log('---------- Файлы и папки, взятые в работу:');
 console.log(lists);
 
+// Запишем стилевой файл диспетчер подключений
+let styleImports = '';
+lists.css.forEach(function(blockPath) {
+  styleImports += '@import url('+blockPath+');\n';
+});
+fs.writeFileSync('./src/css/style.css', styleImports);
+
 // Запуск `NODE_ENV=production npm start [задача]` приведет к сборке без sourcemaps
 const isDev = !process.env.NODE_ENV || process.env.NODE_ENV == 'dev';
 
@@ -37,12 +46,13 @@ gulp.task('clean', function () {
 // Компиляция стилей
 gulp.task('style', function () {
   console.log('---------- Компиляция стилей');
-  return gulp.src(lists.css)
+  return gulp.src('./src/css/style.css')
     .pipe(gulpIf(isDev, sourcemaps.init()))
     .pipe(debug({title: "Style:"}))
     .pipe(postcss([
-      customProperties({preserve: true}),
-      // autoprefixer({browsers: ['last 2 version']}),
+      // customProperties({preserve: true}),
+      atImport({resolve: function(id, basedir, importOptions){return basedir+id.replace(/^\.\/src\/css/,'');}}),
+      autoprefixer({browsers: ['last 2 version']}),
       // mqpacker({
       //   sort: true
       // }),

package.json

@@ -44,6 +44,7 @@
     "build": "cross-env NODE_ENV=production npm start build"
   },
   "devDependencies": {
+    "autoprefixer": "^6.7.7",
     "del": "^2.2.2",
     "gulp": "^3.9.1",
     "gulp-cleancss": "^0.2.2",
@@ -55,6 +56,7 @@
     "gulp-sequence": "^0.4.6",
     "gulp-size": "^2.1.0",
     "gulp-sourcemaps": "^2.4.1",
-    "postcss-custom-properties": "^5.0.2"
+    "postcss-custom-properties": "^5.0.2",
+    "postcss-import": "^9.1.0"
   }
 }

src/blocks/page-header/page-header.css

+.page-header {
+  display: flex;
+  color: var(--gray);
+}

src/blocks/page-header/page-header.less

-// Для импорта в диспетчер подключений: @import './src/blocks/page-header/page-header.less';
-
-@import '../../less/variables.less';     // только для удобства обращения к переменным
-
-
-.page-header {
-
-}

src/css/style.css

-/**
- * ВНИМАНИЕ!
- * Список подключений из папки блоков при старте автоматизации сверяется со
- * списком используемых блоков в ./package.json и если там указаны какие-либо
- * блоки, отсутствующие здесь, их импорты будут добавлены в нижней части файла.
- */
-@import url(variables.css);
-@import url(some-block-TESE.css);
-/* @import url(global.css); */
-
-@import url(../blocks/page-header/page-header.css);
-@import url(../blocks/btn/btn.css);
+@import url(./src/css/variables.css);
+@import url(./src/blocks/page-header/page-header.css);
+@import url(./src/blocks/page-footer/page-footer.css);
+@import url(./src/blocks/page-footer/page-footer__inner.css);
+@import url(./src/blocks/page-footer/page-footer--some-mod.css);
+@import url(./src/css/print.css);

src/css/variables.css

@@ -2,7 +2,7 @@
 
   --black:                    hsl(0, 0%, 0%);
   --gray-darkest:             hsl(0, 0%, 10%);
-  --gray:             hsl(0, 0%, 10%);
+  --gray:                     hsl(0, 0%, 10%);
   --text-color:               var(--gray-darkest, hsl(0, 0%, 10%));
 
 }