Any @import rules must precede all other valid at-rules and style rules in a stylesheet (ignoring @charset and @layer), or else the @import rule is invalid.

Why is this an issue?

Browsers ignore @import rules that appear after other rules, so the referenced stylesheet is never loaded. The stylesheet still parses, which makes the problem easy to miss and can leave missing styles looking like a cascade or specificity issue.

How to fix it

Move @import rules to the top of the stylesheet, keeping them after any optional @charset or statement @layer rules.

Code examples

Noncompliant code example

a { color: red; }
@import 'foo.css'; /* Noncompliant */

Compliant solution

@charset "utf-8";
@layer utilities;
@import 'foo.css';

a { color: red; }

Resources

Documentation