docs: global style imports example (#6490)

docs/content/2.guide/2.features/3.assets.md

@@ -42,3 +42,63 @@ For example, referencing an image file that will be processed if a build tool is
 ::alert{type=info icon=💡}
 Nuxt won't serve files in the `assets/` directory at a static URL like `/assets/my-file.png`. If you need a static URL, use the [`public/` directory](#public-directory).
 ::
+
+### Global Styles Imports
+
+To globally insert statements in your Nuxt components styles, you can use the [`Vite`](/api/configuration/nuxt.config#vite) option at your [`nuxt.config`](/api/configuration/nuxt.config) file.
+
+#### Example
+
+In this example, there is a [sass partial](https://sass-lang.com/documentation/at-rules/use#partials) file containing color variables to be used by your Nuxt [pages](/guide/directory-structure/pages) and [components](/guide/directory-structure/components)
+
+::code-group
+
+```scss [assets/_colors.scss]
+$primary: #49240F;
+$secondary: #E4A79D;
+```
+
+```sass [assets/_colors.sass]
+$primary: #49240F
+$secondary: #E4A79D
+```
+
+::
+
+In your `nuxt.config`
+
+::code-group
+
+```ts [SCSS]
+import { defineNuxtConfig } from 'nuxt'
+
+export default defineNuxtConfig({
+  vite: {
+    css: {
+      preprocessorOptions: {
+        scss: {
+          additionalData: '@use "@/assets/_colors.scss" as *;'
+        }
+      }
+    }
+  }
+})
+```
+
+```ts [SASS]
+import { defineNuxtConfig } from 'nuxt'
+
+export default defineNuxtConfig({
+  vite: {
+    css: {
+      preprocessorOptions: {
+        sass: {
+          additionalData: '@use "@/assets/_colors.sass" as *'
+        }
+      }
+    }
+  }
+})
+```
+
+::