Почему Post css import выдаёт такую ошибку?

Question

[Егор Зузлов]

Всем привет! Возникла такая проблема: В файле index.css вставляю импорты на другие файлы

@import "animate.css";
@import "default.css";

/* Импорт стилей компонентов */
@import "./components/UserPage/UserPage.css";
@import "./components/Topic/Topic.css";
@import "./components/Register/Register.css";
@import "./components/Notify/Notify.css";
@import "./components/Main/Main.css";
@import "./components/Login/Login.css";
@import "./components/Courses/Courses.css";

Конфиг postcss.config.js:

const tailwindcss = require('tailwindcss')
const purgecss = require('@fullhuman/postcss-purgecss')
const postcssImport = require('postcss-import')

module.exports = {
  plugins: [
    tailwindcss('./tailwind.config.js'),
    require('autoprefixer'),
    postcssImport(),
    purgecss({
      content: ['./src/**/*.js'],
      defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || []
    }),
    require('cssnano')
  ],
}

Выполняю такую команду:
postcss src/index.css -o src/assets/main.css

И структура файлов такая:

spoiler

C:.
│   .gitignore
│   package-lock.json
│   package.json
│   postcss.config.js
│   tailwind.config.js
│
├───public
│       index.html
│       manifest.json
│       robots.txt
│
└───src
    │   animate.css
    │   App.js
    │   default.css
    │   index.css
    │   index.js
    │   serviceWorker.js
    │   setupTests.js
    │
    ├───assets
    │   │   main.css
    │   │
    │   └───images
    │           cta_bg.b74fd6e8.jpg
    │           fsDigitalCityBG.3c1e548c.jpg
    │
    ├───components
    │   │   CTAPanel.js
    │   │   Footer.js
    │   │   Svg.js
    │   │
    │   ├───Courses
    │   │       Courses.css
    │   │       Courses.js
    │   │
    │   ├───Login
    │   │       Login.css
    │   │       Login.js
    │   │
    │   ├───Main
    │   │       Main.css
    │   │       Main.js
    │   │
    │   ├───Notify
    │   │       Notify.css
    │   │       Notify.js
    │   │
    │   ├───Register
    │   │       Register.css
    │   │       Register.js
    │   │
    │   ├───Topic
    │   │       Topic.css
    │   │       Topic.js
    │   │
    │   └───UserPage
    │           UserPage.css
    │           UserPage.js
    │
    ├───data
    │       particles.json
    │
    ├───hoc
    │       PageWrapper.js
    │
    └───scripts
            decodeError.js

В итоге выдаёт это на каждый ипорт:

‼  @import must precede all other statements (besides @charset) [postcss-import]

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

Answer 1

[Егор Зузлов]

Я разобрался: Нужно все импорты переместить в самый верх