API Reference: terse, structured descriptions of Astro’s APIs # Imports reference > Learn how to import different file types into your Astro project. Astro supports most static assets with zero configuration required. You can use the `import` statement anywhere in your project JavaScript (including your Astro frontmatter) and Astro will include a built, optimized copy of that static asset in your final build. `@import` is also supported inside of CSS & ` ``` ### `is:inline` [Section titled “is:inline”](#isinline) By default, Astro will process, optimize, and bundle any ` ``` See how [client-side scripts](/en/guides/client-side-scripts/) work in Astro components. ### `define:vars` [Section titled “define:vars”](#definevars) `define:vars={...}` can pass server-side variables from your component frontmatter into the client ` ``` Caution Using `define:vars` on a ` ``` After compiling, Astro’s default behavior will create an inline style where `yellow` appears first, and then `red`. This means the `red` background is applied. Similarly with the two scripts, the word `world!` is logged first, and then `hello` second: ```css body {background:#ff0} body {background:red} ``` ```js console.log("world!") console.log("hello") ``` When `experimental.preserveScriptOrder` is set to `true`, the rendering order of `