diff --git a/docs/content/2.guide/2.features/3.assets.md b/docs/content/2.guide/2.features/3.assets.md index 1b04788adab..b98a4f668e9 100644 --- a/docs/content/2.guide/2.features/3.assets.md +++ b/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 *' + } + } + } + } +}) +``` + +::