Directive at-rule @import

Allows you to import a style sheet into
another style sheet
Imported rules must come before all other types
of rules.

Syntax

@import url;
@import url layer;
@import url layer(layer-name);
@import url layer(layer-name) supports(supports-condition);
@import url layer(layer-name) supports(supports-condition) list-of-media-queries;
@import url layer(layer-name) list-of-media-queries;
@import url supports(supports-condition);
@import url supports(supports-condition) list-of-media-queries;
@import url list-of-media-queries;

Examples

@import "custom.css";
@import url("chrome://communicator/skin/");
@import url("fineprint.css") print;
@import url("bluish.css") print, screen;
@import "common.css" screen;
@import url("landscape.css") screen and (orientation: landscape);
@import url("gridy.css") supports(display: grid) screen and (max-width: 400px);
@import url("flexy.css") supports(not (display: grid) and (display: flex)) screen
  and (max-width: 400px);
@import url("whatever.css") supports((selector(h2 > p)) and
    (font-tech(color-COLRv1)));
@import "theme.css" layer(utilities);
@import url(headings.css) layer(default);
@import url(links.css) layer(default);

@layer default {
  audio[controls] {
    display: block;
  }
}
@import "theme.css" layer();
@import "style.css" layer;

Source

(@import MDN)[https://developer.mozilla.org/en-US/docs/Web/CSS/@import]