Postcss-import: @import must precede all other statements (besides @charset or empty @layer)

by

PostCSS-Import: In order to use the @import rule in PostCSS, it must be placed before any other statements, except for @charset or an empty @layer declaration.

To understand this rule, let’s consider an example:

@import 'styles.css';

body {
  background-color: lightblue;
}

In this example, we are attempting to import an external CSS file called ‘styles.css’ using the @import rule. However, according to the postcss-import plugin, this @import statement should come before the “body” declaration. So, we need to reorganize the code like this:

/* This is the correct order */

@import 'styles.css';

body {
  background-color: lightblue;
}

Now, the @import statement comes before the “body” declaration, as required by the postcss-import plugin.

Leave a comment