Why Post css import gives this error?

Hello! There was such problem: In the file index.css insert imports to other files
@import "animate.css";
@import "default.css";

/* Import the styles for the component */
@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";


Config 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')
],
}


Run this command:
postcss src/index.css -o src/assets/main.css

And the file structure is this:
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


In the end, throws this on every iport:
‼ @import must precede all other statements (besides @charset) [postcss-import]


The Internet was people have this problem, but I fixed it 4 years ago and other cases of this problem I have not found. Help to understand!
April 16th 20 at 10:31
1 answer
April 16th 20 at 10:33
Solution
I figured it out: you Need all the imports to move to the top

Find more questions by tags WebpackReactCSS